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