Question

我有一个显示：无属性的字段。就像，当用户点击“是”单选按钮时，将出现文件上传字段，并且还会进行文件上传验证。在这种情况下，我使用忽略[] 使验证工作正常，但即使我点击否，也会发生文件上传验证。

这是我的代码

  <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
            }
         }
         });

Answer 1

在验证脚本中使用fup代替fup1。

Answer 2

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

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'即可。这使用了所需规则的dependency-expression版本。

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

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

如何使用style = display：none验证字段？

2 个答案: