javascript - 使用 jQuery 验证插件 1.11.1 动态添加/删除具有数据属性的表单验证

Question

我正在使用 jQuery 验证插件来处理表单验证，也使用像这样的数据属性

<input type="text" class="firstName" name="firstName" data-rule-required="true" /> 

JSFiddle - http://jsfiddle.net/ylokesh/SLXhR/135/

正常情况:如果我没有单击提交按钮并更改下拉值并单击提交按钮，它会很好地工作。

有问题的场景:一旦我单击提交按钮，然后尝试更改下拉值。它不会禁用/启用所需的验证。

重现实际问题的步骤

• 点击表单提交按钮以触发所需的字段验证
• 输入字段将显示错误消息
• 现在更改国家/地区下拉列表值以使输入字段不再为必填
• 这次错误消息应该会消失，但事实并非如此

JavaScript

$('#validate-me-plz').validate();

$("#country").change(function(){
    if($(this).val() === "country1") {
        if($('.firstName').attr('data-rule-required') !== 'true') {
            $('.firstName').attr('data-rule-required','true');    
        }
    } else if($(this).val() === "country2") {
        if($('.firstName').attr('data-rule-required') !== 'false') {
            $('.firstName').attr('data-rule-required','false');    
        }
    }
});

请指导我找到此问题的解决方案。提前致谢。

Answer 1

使用data而不是attr，并且设置一个bool而不是设置字符串true或false 值

<强> DEMO

$("#country").on('change',function(){
    if($(this).val() === "country1") {
        if(!$('.firstName').data('rule-required')) { //check bool value
            $('.firstName').data('rule-required',true);    //set bool value
        }
    } else if($(this).val() === "country2") {
        if($('.firstName').data('rule-required')) {
            $('.firstName').data('rule-required',false);    
        }
    }
});