javascript - Clear jquery.validate error messages on changehide of disabled attributes - Stack Overflow

admin管理员组

文章数量:1394980

Trying to clear the error messages when the disabled fields are toggled on and off on my form using jquery.validate. Right now I have it working where on change or on click fields are showing and changing the prop from disabled. So it works for what I need which is hiding the fields that are not necessary and not validating them when they are in a disabled state. However, when I toggle these fields back to their disabled state ad hide them, the error messages are still showing until I click submit again. I tried adding the .valid() call to the toggleDisabled function and it does not make the messages disappear when they go back to a hidden/disabled state. Anyone see what can be added to make the messages disappear when the fields do?

Here is the working fiddle with what I have so far: JS Fiddle

And I am using jquery.validate from :

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

});

Trying to clear the error messages when the disabled fields are toggled on and off on my form using jquery.validate. Right now I have it working where on change or on click fields are showing and changing the prop from disabled. So it works for what I need which is hiding the fields that are not necessary and not validating them when they are in a disabled state. However, when I toggle these fields back to their disabled state ad hide them, the error messages are still showing until I click submit again. I tried adding the .valid() call to the toggleDisabled function and it does not make the messages disappear when they go back to a hidden/disabled state. Anyone see what can be added to make the messages disappear when the fields do?

Here is the working fiddle with what I have so far: JS Fiddle

And I am using jquery.validate from :

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

});

• javascript
• jquery
• html
• jquery-validate

Share Improve this question Follow asked Feb 23, 2014 at 3:58 isaac weathersisaac weathers 1,47255 gold badges2929 silver badges5454 bronze badges 14

• 1 FYI- there is no such jQuery Validate option called onblur. For this plugin, the option is called onfocusout and you must never set it to true. It's already the default behavior so just leave it out... I've seen setting it to true break the plugin. See the documentation: jqueryvalidation/validate – Sparky Commented Feb 23, 2014 at 6:11
• Yeah I forgot about that using onkeyup: false defaults it to the blur but you do not have to specify that. Thank you for pointing that out. – isaac weathers Commented Feb 24, 2014 at 2:12
• Yes, but onfocusout is the default behavior regardless of how you set onkeyup. The two are not interlocked. It's all spelled out in the docs. – Sparky Commented Feb 24, 2014 at 5:53
• Oh hey @Sparky, so I reviewed the docs again. Here ya go: var v = $("#cmaForm").validate({ errorClass: "warning", onkeyup: false, onblur: false, submitHandler: function() { alert("Submitted, thanks!"); } }); Looks like the onblur is used. jquery.bassistance.de/validate/demo/multipart – isaac weathers Commented Feb 27, 2014 at 3:43
• That's an error in the docs. Look at the source code of the plugin itself. There is no onblur option. – Sparky Commented Feb 27, 2014 at 4:20

 |  Show 9 more ments

1 Answer 1

Sorted by: Reset to default 4

I have changed your plugin a little to do what you want.

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

---

Update

Another way without changing your plugin

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

本文标签： javascriptClear jqueryvalidate error messages on changehide of disabled attributesStack Overflow