使用jQuery验证插件进行文件上传验证

我有一个奇怪的问题。我有一个文件上传和几乎没有其他textarea的表单。每个字段都是必需的。所以基本上当几个字段留空时，验证工作正常，但当且仅当文件上传空白时，表单才会被提交。使用jQuery验证插件进行文件上传验证

这里是我的代码

<li > 
    <p> 
    <label for="rad">radio label: 
    </label><br> 

    <input type="radio" name="rad" value="yes" style="width:20px">&nbsp; Yes&nbsp;&nbsp;</input> 
    <input type="radio" name="rad" value="no" style="width:20px">&nbsp; 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">&nbsp;&nbsp; <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(); 
} 
}); 
});

，这我的jQuery

$('#form').validate({ 
rules: {  
fupl: { 
    required: true, 
    accept:'docx|doc' 
    },

来源

2013-02-28 lakshganga

你在你的代码显示上面没有'form'标签。 – Sparky 2013-02-28 23:51:36

您的代码似乎工作得很好。验证插件会忽略隐藏的字段。但是，当您通过单选按钮显示文件上载字段时，它将验证并显示错误消息。请参阅：http://jsfiddle.net/y5ghU/

您的代码：

<input type="file" name="fupl" style="display:none;margin-top:10px" id="fup"/>

文件上传字段设置为display:none;和插件将忽略默认情况下，所有的隐藏的字段。

使用ignore: []选项可禁用此功能。

$(document).ready(function() { 

    $('#form').validate({ 
     ignore: [], 
     rules: { 
      fupl: { 
       required: true, 
       accept: 'docx|doc' 
      } 
     } 
    }); 

});

DEMO：http://jsfiddle.net/ptV35/

编辑：不能确定的OP想要哪个方向走，但是当文件上传字段是再下面的演示隐藏任何未决的错误信息-隐。

$("#fup").next('label.error').hide();

http://jsfiddle.net/y5ghU/4/

来源

2013-02-28 23:57:20 Sparky

谢谢你的工作..但它就像验证后不久，文件上传字段消失，只是错误消息显示。我也需要显示文件上传字段。 – lakshganga 2013-03-01 08:36:27

此外，即使我点击“否”，那么它也说该字段是必需的。 – lakshganga 2013-03-01 09:23:14

@lakshganga，你可以添加'$（“＃fup”）。next（'label.error'）。hide（）;'隐藏标签。请参阅：http://jsfiddle.net/y5ghU/4/ – Sparky 2013-03-01 15:59:43

使用jQuery验证插件进行文件上传验证

回答

相关问题