[英]Clear jquery.validate error messages on change/hide of disabled attributes
使用jquery.validate在表單上啟用和禁用禁用字段時,嘗試清除錯誤消息。 現在,我可以在顯示更改或單擊字段並從禁用更改道具的地方工作。 因此,它可以滿足我的需求,即隱藏不必要的字段,並且在它們處於禁用狀態時不對其進行驗證。 但是,當我將這些字段切換回其禁用狀態並隱藏它們時,錯誤消息仍會顯示,直到再次單擊“提交”為止。 我嘗試將.valid()調用添加到toggleDisabled函數,並且當它們返回到隱藏/禁用狀態時,它不會使消息消失。 有人看到可以添加哪些內容來使字段消失時消息消失嗎?
這是到目前為止我正在使用的小提琴: JS小提琴
我正在從使用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();
});
});
我對您的插件做了一些更改,以完成您想要的操作。
(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);
無需更改插件的另一種方法
$(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(); }); });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.