1

我有一个带有 display:none 属性的字段。就像，当用户单击“是”单选按钮时，将出现文件上传字段，并且也会对文件上传进行验证。在这种情况下，我使用了ignore[]来制作该验证有效，但发生的情况是，即使我单击“否”，也会进行文件上传验证。

这是我的代码

  <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="rad" 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();
        }
        });
        });
    </script>

这是我的jQuery

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

2 回答 2

0

您可以在更改功能中添加文件上传规则，而不是将它们始终保留在其中：

var fuplRules = {
    required: true,
    accept: 'docx|doc'
};


$("input[type='radio']").change(function () {
    if ($(this).val() == "yes") {
        $("#fup").show().rules('add', fuplRules);
    } else {
        $("#fup").hide().rules('remove');
    }
});

或者，您可以保持现在的设置，只需required: true将required: 'input[name="rad"][value="yes"]:checked'. 这使用所需规则的依赖表达式版本。

工作示例#1：http: //jsfiddle.net/ryleyb/WFKfq/

工作示例#2：http: //jsfiddle.net/ryleyb/WFKfq/1/

于 2013-03-01T16:18:21.987 回答
0

在您的验证脚本中使用fup而不是。fup1

于 2013-03-01T12:11:18.973 回答