使用jQuery Validate插件进行文件上传验证 [英] File upload validation with jQuery Validate plugin
问题描述
这是我的代码
< li>
< p>
< label for =rad>广播标签：
< / label>< br>
< input type =radioname =radvalue =yesstyle =width：20px>& nbsp;是&安培; NBSP;&安培; NBSP;< /输入>
< input type =radioname =radvalue =nostyle =width：20px>& nbsp;否LT; /输入><峰; br />
< label for =cvclass =errorstyle =display：none>此字段是必需的< / label>
< / p>
< p>
< input type =filename =fuplstyle =display：none; margin-top：10pxid =fup/>
< / p>
< / li>
< br>
< li>
< label>复选框标签
< / label>< br>< br>
< input type =checkboxname =cbvalue =tickstyle =width：20px>& nbsp;& nbsp; <小>复选框字段<小>< /输入>< br> < label for =feeclass =errorstyle =display：none>此栏位为必填项< / label>
< / li>
< br>< li>
< input type =submitclass =buttonvalue =SUBMITstyle =float：right/>
< / li>
< script>
$（document）.ready（function（）
{
$（input [type ='radio']）。change（function（）{
if （this）.val（）==yes）
{
$（＃fup）。show（）;
}
else
{
$（＃fup）。hide（）;
}
}）;
}）;
这个我的jquery > $（
$ b $ $ $ $ $ $ $ $ $'
required：true，
accept：'docx | doc'
}，
你的代码似乎工作得很好，隐藏的字段被Validate插件忽略，但是当你通过单选按钮显示文件上传字段时，它将会验证并显示错误信息请参阅： http://jsfiddle.net/y5ghU/
< hr>
您的代码：
< input type =filename = fuplstyle =display：none; margin-top：10pxid =fup/>
您的文件上传字段设置为 display：none; ，插件将默认忽略所有隐藏字段。
使用忽略：[] 选项禁用此功能。
$（ （
$ b $（'＃form'）。validate（{
ignore：[]，
rules：{
fupl： {
required：true，
accept：'docx | doc'
}
}
}）;
}）;
DEMO： http://jsfiddle.net/ptV35/
编辑：不太确定OP要走哪条路，但是当文件上传字段被重新隐藏时，下面的演示将隐藏任何待处理的错误消息。
<$ p $ 。p>
$（ ＃FUP）下（ 'label.error'）隐藏（）;
I have a weird problem.I have a form with a file upload and few other textarea .each and every field is required.so basically when few fields are left blank,the validation works fine but if and only if the file upload is left blank,the form gets submitted.
Here is my code
<li >
<p>
<label for="rad">radio label:
</label><br>
<input type="radio" name="rad" value="yes" style="width:20px"> Yes </input>
<input type="radio" name="rad" value="no" style="width:20px"> No</input><br/>
<label for="cv" class="error" style="display:none">This field is required</label>
</p>
<p>
<input type="file" name="fupl" style="display:none;margin-top:10px" id="fup"/>
<label for="fupl" class="error" style="display:none;color:red">This field is required</label>
</p>
</li>
<br>
<li>
<label>checkbox label
</label><br><br>
<input type="checkbox" name="cb" value="tick" style="width:20px"> <small>checkbox field<small></input><br> <label for="fee" class="error" style="display:none">This field is required</label>
</li>
<br><li>
<input type="submit" class="button" value="SUBMIT" style="float:right"/>
</li>
<script>
$(document).ready(function()
{
$("input[type='radio']").change(function(){
if($(this).val()=="yes")
{
$("#fup").show();
}
else
{
$("#fup").hide();
}
});
});
and this my jquery
$('#form').validate({
rules: {
fupl: {
required: true,
accept:'docx|doc'
},
Your code appears to be working just fine. Hidden fields are ignored by the Validate plugin. However, when you show the file upload field via radio button, it will validate and display the error message. See: http://jsfiddle.net/y5ghU/
Your code:
<input type="file" name="fupl" style="display:none;margin-top:10px" id="fup"/>
Your file upload field is set to display:none; and the plugin will ignore all hidden fields by default.
Use the ignore: [] option to disable this feature.
$(document).ready(function () {
$('#form').validate({
ignore: [],
rules: {
fupl: {
required: true,
accept: 'docx|doc'
}
}
});
});
DEMO: http://jsfiddle.net/ptV35/
EDIT: Not really sure which way the OP wants to go, but the following demo hides any pending error message when the file upload field is re-hidden.
$("#fup").next('label.error').hide();
这篇关于使用jQuery Validate插件进行文件上传验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
