jQuery onclickハンドラを使用して検証できません？

Question

jQuery Validateを使用して、次のようにアンカーonclickハンドラを使用していくつかのフォームフィールドを検証しますが、動作しないようですか？

<input type="text" id="StartDate" name="StartDate"> 
<input type="text" id="EndDate" name="EndDate"> 

<a class="btn btn-primary js-add" href="#">Add</a> 




<script> 
    $(document).on('click', '.js-add', function (e) { 
     e.preventDefault(); 

     var validator = $("form").validate({ 
      rules: { 
       StartDate: { 
       required: true 
       }, 
       EndDate: { 
       required: true 
       } 
      }, 
      messages: { 
       StartDate: "The Start Date is required", 
       EndDate: "The End Date is required" 
      } 

     }); 

     if (!validator.valid()) { 
      console.log("invalid"); 
      return; 
     } 

     // otherwise do stuff but we dont want to submit form 
    }); 

</script> 

私はフィールドを検証したいと、彼らが有効である場合は、ハンドラ内でいくつかの他のものを行うが、私は、フォームを提出するための別のボタンを持っているように、フォームを送信したくありません。上記のvalidator.valid()関数は常にtrueです。私はメインボタンを提出するとき、上記のフィールドを検証する必要はありません。必須ではありません。これは、上記のフィールドを検証する必要があるクライアント側の対話のためのものです。

私は上記を達成する方法はありますか？

Answer 1

ため

<input type="text" name="usrname" required> 

fiddleとして入力タグに必要な属性を追加関数はブール値を返していません。戻り値のロギングを試してみると、返されるオブジェクトはブール値ではありません。

.validate()はブール値を返さないため、検証を設定します。

<form>または入力要素を使用して、ブール結果を得るために.valid()を呼び出して有効であるかどうかを判断します。

したがって、上記のif (!validator.valid())は動作しません。&したがって、console.log("invalid");行は実行されません。

このCodepen

Answer 2

ちょうどあなた

if (!validator.valid()) { 
     console.log("invalid"); 
     return; 
    } 

が

if (!$("form").valid()) { 
     console.log("invalid"); 
     return; 
    } 

あなたの主な問題は012であるべきであるデモ

Answer 3

は

data-val="true" data-val-required="your error message" 

は、あなたのアンカーをクリックするだけでこのコードを実行するinput要素にこれらの属性を追加するチェック

$(this).validate(); 

あなた必見もrefrence jquery.validate.js