jQueryのカスタム検証は

Question

私はカスタムクライアント側のjqueryの検証を構築しようとしていると私はHTML5のデータから生成したデフォルト値を無視しようとしていますが、上記のコードで

$('input, textarea').each(function() { 
      if ($(this).data('val-default')) { 
       $(this).focus(function() { 

       if (this.value == $(this).data('val-default')) 
        this.value = ''; 
      }); 
      $(this).blur(function() { 
       if (this.value == '') 
        this.value = $(this).data('val-default'); 
      }); 
      this.value = $(this).data('val-default'); 
     } 
    }); 

ので属性この

data-val-default="Type your first name here" 

placeholder属性は、まだ残念ながら

オプションではありませんように私には、入力とTEXTAREA要素に問題を既定値を追加することはできませんワットは、私はここに、この

$.validator.addMethod("ignoreDefaultValues", function (value, element) { if ($(element).data('val-default')) return !($(element).data('val-default') == element.value); return true; }, "Required field" );

$('form#contact-form').submit(function (e) { 
      e.preventDefault(); 
      if (!$(this).valid({ 
       rules: 
         { 
        title: 
         { 
          ignoreDefaultValues: true, 
          required: true 
         }, 
       description: 
         { 
          ignoreDefaultValues: true, 
          required: true 
         }, 
        name: 
         { 
          ignoreDefaultValues: true, 
          required: true 
         }, 
         email: 
         { 
          ignoreDefaultValues: true, 
          required: true 
         } 
       } 
      })) { 
       alert("NOT VALID!"); 
      } 


     else 
      { 
      alert("IS VALID!"); 
      //todo: ajax post to server 
     } 
    }); 

のようにjQueryの検証と、これらの要素を検証しようとしていますことを

<input type="text" class="firstname" name="firstname" data-val-default="Type your first name here" data-val="true" data-val-required="*" /> 

jqueryの検証がルールを無視するようで入力要素の一例です。空のスペースを入力するなどしてテストすると、「有効」ではないことを確認して警告しますが、カスタム検証は無視されます。

私は間違っていますか？

私は何かを見逃しましたか？

Answer 1

送信機能の前に検証を設定する必要があります。代わりにsubmitハンドラーで$(this).valid(...)を実行する代わりに、事前にこれを実行してください。

$('form#contact-form').validate({ //your rules 
    , 
    submitHandler:function(){ 
     alert('Is Valid!'); 
     $(this).submit(); //or submit via AJAX, or whatever you planned... 
    }, 
    invalidHandler:function(){ 
     alert('Is not valid!'); 
    } 
});