jQuery 验证：一次验证一个字段

Question

我知道 jQuery 默认情况下验证一次只显示一个错误。我的目的是创建一个表单，只有在正确填写表单时才启用提交按钮。这是我的两个片段：

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-disabled" class。如果表单有效，则删除 class 并且按钮为 clickable/submits 表单。

如果用户在没有提交表单的情况下离开页面，我也有这个片段来保留输入值：

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，但结果是一样的。当然，我不是专家，所以我不确定这是否真的是实际问题。

有什么建议吗？谢谢！

Answer 1

我同意这很可能是由您的 blur 事件处理程序引起的。尝试改变这个：

if (jQuery("#validate-info").valid()) {

为此：

if (jQuery("#validate-info").validate().checkForm()) {

checkForm() 函数应该 return 一个基于表单是否有效的布尔值，但它不会导致出现任何验证错误消息。

jQuery 验证：一次验证一个字段

jQuery Validate: Validate One Field at a Time

jquery

jquery-validate