Add/Remove 使用 jQuery 验证插件 1.11.1 即时使用数据属性进行表单验证

Question

我正在使用 jQuery 验证插件来处理表单验证，它也使用像

这样的数据属性

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

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

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

有问题的场景： 一旦我点击提交按钮，然后尝试更改下拉值。它不会 disable/enable 需要验证。

重现实际问题的步骤

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

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，而不是设置字符串 true 或 false 设置 bool 值

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

Add/Remove 使用 jQuery 验证插件 1.11.1 即时使用数据属性进行表单验证

Add/Remove form validations with data attributes on the fly using jQuery Validation Plugin 1.11.1

javascript

jquery

jquery-validate