[英]jQuery Validate: Validate One Field at a Time
我知道jQuery Validate默认一次只显示一个错误。 我的意图是创建一个仅在正确填写表单后才启用提交按钮的表单。 这是我的两个片段:
jQuery(document).ready(function() {
jQuery('input').on('blur', function() {
if (jQuery("#validate-info").valid()) {
jQuery('#toggle-delivery').removeClass("btn-disabled");
} else {
jQuery('#toggle-delivery').addClass("btn-disabled");
}
});
jQuery("#validate-info").validate({
rules: {
phone_number: {
required: true,
digits: true,
minlength: 9
},
email_address: {
required: true,
email: true
},
shipping_first_name: {
required: true,
minlength: 2
},
shipping_last_name: {
required: true,
minlength: 2
}
},
onfocusout: function(e) {
this.element(e);
},
onkeyup: false,
messages: {
phone_number: {
required: "Please enter a valid UK phone number",
digits: "Please enter a valid UK phone number.",
minlength: "Please enter at least 9 characters"
},
email_address: {
required: "We need your email address to contact you.",
email: "Oops! This isn't a correct email format. Please check and try again."
},
shipping_first_name: {
minlength: "Please enter at least 2 characters."
},
shipping_last_name: {
minlength: "Please enter at least 2 characters."
}
}
});
});
默认情况下,该按钮具有“禁用btn”的类。 如果该表单有效,则该类将被删除,并且该按钮是可单击的/提交该表单。
如果用户在不提交表单的情况下离开页面,我也有以下代码段可保留输入值:
jQuery(document).ready(function() {
jQuery(window).unload(saveSettings);
loadSettings();
});
function loadSettings() {
jQuery('#shipping_first_name.input-text').val(localStorage.shippingfirstname);
jQuery('#shipping_last_name.input-text').val(localStorage.shippinglastname);
jQuery('#email_address.input-text').val(localStorage.emailaddress);
jQuery("#phone_number.input-text").val(localStorage.phonenumber);
jQuery("#shipping_address_1.input-text").val(localStorage.shippingaddress);
jQuery('#billing_first_name.input-text').val(localStorage.billingfirstname);
jQuery('#billing_last_name.input-text').val(localStorage.billinglastname);
jQuery('#billing_email.input-text').val(localStorage.billingemailaddress);
jQuery("#billing_phone.input-text").val(localStorage.billingphonenumber);
jQuery("#billing_address_1.input-text").val(localStorage.billingaddress);
jQuery('input#ship-to-different-address-checkbox[value="' + localStorage.billtoaddress + '"]').prop('checked', true);
}
function saveSettings() {
localStorage.shippingfirstname = jQuery('#shipping_first_name.input-text').val();
localStorage.shippinglastname = jQuery('#shipping_last_name.input-text').val();
localStorage.emailaddress = jQuery('#email_address.input-text').val();
localStorage.phonenumber = jQuery("#phone_number.input-text").val();
localStorage.shippingaddress = jQuery("#shipping_address_1.input-text").val();
localStorage.billingfirstname = jQuery('#billing_first_name.input-text').val();
localStorage.billinglastname = jQuery('#billing_last_name.input-text').val();
localStorage.billingemailaddress = jQuery('#billing_email.input-text').val();
localStorage.billingphonenumber = jQuery("#billing_phone.input-text").val();
localStorage.billingaddress = jQuery("#billing_address_1.input-text").val();
localStorage.billtoaddress = jQuery('input#ship-to-different-address-checkbox[type=checkbox]:checked').val();
}
当用户返回页面时(通过意外刷新或导航到另一个页面),这将自动填充表单。
我的问题是,现在,如果用户导航到该页面以填写表单(第一次)并完成第一个字段,则在选择下一个表单时,将触发验证,所有其他字段显示为红色每个输入字段下的错误消息。 看截图:
我该如何预防? 我想验证每个字段并单独显示错误,而不是一次显示所有错误。 我怀疑这与代码片段的on('blur'
部分有关。我尝试使用change
和keyup
而不是blur
,但是结果是相同的。当然,我不是专家,所以我不是确定那是否真的是实际问题。
有小费吗? 谢谢!
我同意这很可能是由您的blur
事件处理程序引起的。 尝试更改此:
if (jQuery("#validate-info").valid()) {
对此:
if (jQuery("#validate-info").validate().checkForm()) {
checkForm()
函数应根据表单是否有效返回布尔值,但不会导致出现任何验证错误消息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.