jQueryを取得してブラウザによって事前に入力されたフィールドを検証する方法

Question

エンドユーザーから個人情報を収集し、JS検証関数をトリガするフォームがあります。簡単な例では、フォームに姓、名字、電子メールアドレスがあると言うだけです。

フォームが記入されて提出されると、私が元に戻った場合、ブラウザは予期したとおりにフォームをあらかじめ入力します。問題は、フィールドを変更せずにタブを移動しても、プラグインが元に戻ってこなかった場合です。

わかりませんなぜ検証していないのですか事前設定フィールドと、私はそれを取得する方法を確認していない誰もが、私はjQueryの最新バージョンおよび検証プラグイン（http://jqueryvalidation.org/）を実行しています任意のアイデアを持っています

サンプルコード：。。？。

$(document).ready(function() { 
    var rules = { 
     FirstName: 'required', 
     LastName: 'required', 
     EmailAddress: { 
      required: true, 
      customEmail: true, 
      checkAccountExists: true 
     } 
    }; 

    //And field specific (and even validation type specific) error messages 
    var messages = { 
     FirstName: 'Your first name is required.', 
     LastName: 'Your last name is required.', 
     EmailAddress: { 
      required: 'Your email address is required.', 
      customEmail: 'You must enter a valid email address.', 
      checkAccountExists: 'We already have an account with that email address. Please login.' 
     } 
    }; 

    $('#applicationForm').validate({ 
     //debug: true, 
     rules: rules, 
     messages: messages, 
     errorElement: 'span' 
    }); 
}); 

jQuery.validator.addMethod('customEmail', function(value, element) { 
    return this.optional(element) || /[A-z0-9._%-+]{1,}@[A-z0-9._%-]{1,}\.[A-z0-9._%-]{1,}/.test(value); 
}, 'Invalid email address entered.'); 


jQuery.validator.addMethod('checkAccountExists', function(value, element) { 
    if (this.optional(element)) { 
     return true; 
    } 

    var url = $(element).attr('checkEmailUrl'); 

    $.ajax({ 
     type: 'GET', 
     data: {EmailAddress: value, check: true}, 
     dataType: 'json', 
     url: url, 
     success: function(response) { 
      var dataArray = jQuery.parseJSON(response); 

      //If it exists then trigger the popup 
      if (dataArray.result == 'EXISTS') { 
       kclHelpers.showEmailExistsModal(value); 
      } 
     } 
    }); 

    return true; //If it exists the popup will handle it. We are just using this to trigger it 
}, 'An account under the specified email address already exists. Please sign in.'); 

Answer 1

シンプル私が採用しているソリューションは、検証したい要素に既にバインドされているブラーイベントをトリガすることです。各要素の値をチェックして検証する必要があるかどうかを判断することで、ユーザーが操作する前にこの操作が要素をトリガーできないようにすることができます。

$(window).load(function() { 
    //pre-highlight fields with values 
    $('input[type=text], input[type=email], input[type=url], input[type=password], select').filter(function() { 
     return $.trim($(this).val()) != ''; 
    }).blur(); 
});