JQuery - フォーム検証 - Onblur

Question

私はjquery検証が機能するフォームを持っていますが、私はそれをさらに一歩進めたいと思います。プラグインを使用して検証しますが、送信時にのみ有効です。ぼかしで検証する方法があるかどうか疑問に思っています。そのため、人は、エラーがあるかどうかを知るために提出するまで待つ必要はありません。

私はこのプラグインをダウンロード：

http://docs.jquery.com/Plugins/Validation

私はJSがページの上部にあるファイルをプラグインし、その下に私はJSを持っている含ま：

<script> 
    $(document).ready(function(){ 
    $("#formid").validate(); 
    }); 
    </script> 

検証が正常に動作します私がフォームを提出するとき。私はぼかしの各フィールドを検証するために、これに追加する必要があるのか​​どうか疑問に思っています。

あなたがjsのは、あなたがコメントの束があり、それを見たり、ページの下部にリンクでもここ

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

をダウンロードすることができ、ファイルを参照する必要がある場合。これらのコメントの一部は、ぼかしを設定することを参照しています。私はそれを行う方法を理解していませんでした。何か助けてくれてありがとう。

Answer 1

<script> 
    $(document).ready(function(){ 
    $("#formid input, #formid select, #formid textarea").blur(function() { $('#formid').validate(); }); 
    }); 
</script> 

Answer 2

バリデーターフォームの方法については、documentationを参照してください。

これは、フォームの検証をトリガー：

$('#formid').validate().form(); 

あなたはぼかしでそれをしたい場合は、これを使用する可能性があります：

$('#formid :input').blur(function() { 
    $('#formid').validate().form(); 
}); 

Answer 3

あなたは

（それを表示するには、スクロールダウン）trueに onfocusout optionを設定する必要があります

$("#formid").validate({ 
    rules: { 
     // simple rule, converted to {required:true} 
     required: "required", 
    }, 
    onfocusout: true 
}); 

Answer 4

私が見ることができる最良の方法は、ぼかしイベントで$.validate.element(selector)を使用することです

var v = $('#formid').validate(); 

次にセットアップぼかしイベント：H要素あなたがのために、この動作をしたい

$('#firstName').blur(function(){ 
    v.element('#firstName'); 
}); 

は、ここでは、アクションでそれを参照してください：プラグインのhttp://jsfiddle.net/ryleyb/brUVZ/

Answer 5

現在のバージョンでは、「validateOnBlurと呼ばれる機能を持っていますあなたが求めていることをします。

#formidのIDをフォームに適用した場合、コードは次のようになります。私はそのすでに手遅れ知っているが、まだ私はこれに追加するhttps://github.com/victorjonsson/jQuery-Form-Validator

Answer 6

- 彼のgithubのページに、この頭の上にいくつかの固体のドキュメントについては

<script> 
    $('#formid').validateOnBlur(); 
</script> 

。提出し、ぼかしイベントの検証を設定する 非常に簡単な方法は次のとおりです。

$("#MainForm").validate({ 
      onfocusout: function (element) {      
       if ($(element).valid()) 
       { 
        $(element).removeClass('input-error').addClass('input-valid'); 
       } 
      },     

      invalidHandler: function (event, validator) { 
       $.each(validator.errorList, function (index, error) { 
        $(error.element).addClass('input-error'); 
       }); 
      }, 

      showErrors: function() { 
       //This function is kept blank so as to hide the default validation messages. 
      } 
     }); 

CSS

.input-error { 
    border-color: #FF1919; 
    box-shadow: 0px 0px 10px #FF1919; 
} 
.input-valid { 
    border-color:#009500; 
    box-shadow: 0px 0px 10px #009500; 
} 

はそれを試してみます。