Question

尝试使用jquery.validate在我的表单上打开和关闭禁用字段时清除错误消息。现在我让它工作在更改或点击字段显示和更改禁用的道具。所以它适用于我需要的东西，它隐藏了不必要的字段，并且当它们处于禁用状态时不验证它们。但是，当我将这些字段切换回其禁用状态时，广告隐藏它们，错误消息仍然显示，直到我再次单击提交。我尝试将.valid（）调用添加到toggleDisabled函数，并且当它们返回隐藏/禁用状态时它不会使消息消失。任何人都可以看到可以添加什么来使消息在字段出现时消失？

这是我到目前为止的工作小提琴： JS Fiddle

我正在使用jquery.validate：

jQuery.Validate

HTML：

<form id="myform">
<input type="text" name="field1" />
<br/>
<br />
<input type="text" id="toggleInput" name="toggleInputName" disabled style="display:none" />
<input type="button" id="toggleButton" value="Toggle Disabled" />

<div id="tickets">
    <label for="group1">Number of Tickets: <span class="req">*</span></label>
    <select class="group1_dropdown" id="group1" name="group1">
        <option value="0">-- Please select --</option>
        <option value="1">Member</option>
        <option value="2">Member + 1 Guest</option>
        <option value="3">Member + 2 Guests</option>
        <option value="4">Member + 3 Guests</option>
    </select>
</div>
<input type="text" id="payMethod" name="payMethodName" disabled style="display:none" />
<input type="submit" />
</form>

JS：

$(document).ready(function () {
    $('#myform').validate({
        onblur: true,
        onkeyup: false,
        ignore: ":disabled",
        rules: {
            field1: {
                required: true,
                minlength: 5
            },
            payMethodName: {
                required: true,
                minlength: 5
            },
            toggleInputName: {
                required: true,
                minlength: 5
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form');
            return false;
        }
    });
});
//used for toggling/showing disabled fields - will display and make not disabled on same click event
(function ($) {
    $.fn.toggleDisabled = function () {
        return this.each(function () {
            var $this = $(this);
            if ($this.prop('disabled')) {
                $this.prop('disabled', false).show();
            } else {
                $this.prop('disabled', true).hide();
            }
        });
    };
})(jQuery);
  $(function () {
    $('#toggleButton').click(function () {
        $('#toggleInput').toggleDisabled();
    });
});
$(function () {
$("#group1").change(function () {
    var str = "";
    str = parseInt($(this).val());
    if(str == 2)
        $("#payMethod").toggleDisabled();
    else
        $("#payMethod").toggleDisabled();
});

});

Answer 1

我已经改变了你的插件以做你想做的事。

Fiddle Demo

(function ($) {
    $.fn.toggleDisabled = function () {
        return this.each(function () {
            var $this = $(this),
                id = $this.attr('id'), //get the id of input
                label = $this.next('label[for="' + id + '"]'); //find the next label which is added by jQuery Validator
            if ($this.prop('disabled')) {
                label.show(); //show the label
                $this.prop('disabled', false).show();
            } else {
                label.hide();//hide the label
                $this.prop('disabled', true).hide();
            }
        });
    };
})(jQuery);

<小时/> 更新

另一种不改变插件的方法

Fiddle Demo

$(document).ready(function () { //place your all DOM ready code in one DOM ready handler
    var validator = $('#myform').validate({ //assign validate to a variable
        //validator code here 
    });
    $('#toggleButton').click(function () {
        validator.resetForm();//reset Form validation
        $('#toggleInput').toggleDisabled();
    });
});

更改/隐藏已禁用属性时清除jquery.validate错误消息

1 个答案: