jQuery Validate：一度に1つのフィールドを検証する

Question

jQuery Validateは、デフォルトで一度に1つのエラーのみを表示しています。私の意図は、フォームが正しく記入された場合にのみ提出ボタンを有効にするフォームを作成することです。ここに2つのスニペットがあります：

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」クラスがあります。フォームが有効な場合、クラスは削除され、ボタンはクリック可能/フォームを送信します。

私はまた、ユーザーがフォームを送信せずにページを離れた場合、入力値を保持するには、このスニペットを持っている：ユーザーが（どちらか誤ってリフレッシュして戻っページに来るとき

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'の部分と関係があると考えています。 blurの代わりにchangeとkeyupを試しましたが、結果は同じです。もちろん、私は専門家ではないので、実際に実際の問題かどうかはわかりません。

ヒント？ありがとう！

Answer 1

あなたのblurイベントハンドラが原因である可能性が最も高いことに同意します。これに

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

：これを変更してみてください

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

checkForm()機能は、フォームが有効であるか否かに基づいてブール値を返す必要がありますが、それはすべての検証エラーメッセージが表示される場合がありません。 。