jqueryバリデーターaddClassRulesメソッドがすべての要素に適用されない

jqueryバリデーターを初めて使用しています。私はここにこだわっていくつかの助けを必要としていますjqueryバリデーターaddClassRulesメソッドがすべての要素に適用されない

私はいくつかのinputフィールドのそれぞれにそれぞれclassのフィールドがあります。 addClassRulesメソッドでルールを追加してjqueryバリデータを使って検証したいと思います。

問題は、クラスルールの追加は最初のルールでは機能しますが、それ以降は機能しません。以下は

私のコード

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Simple DataTable</title> 
<link rel="stylesheet" href="css/bootstrap.css"/> 
</head> 
<body> 
<center> 
<div class="container" > 
<h1>Welcome to boostrap</h1> 
</div> 

<form> 
    <table> 

     <tr> 
      <td><input type="text" class="abc"/></td> 
      <td><input type="text" class="jkl"/></td> 
      <td><input type="text" class="xyz"/></td> 
     </tr> 
     <tr> 
      <td><input type="text" class="abc"/></td> 
      <td><input type="text" class="jkl"/></td> 
      <td><input type="text" class="xyz"/></td> 
     </tr> 


    </table> 


    <input type="submit" /> 
</form> 

</center> 
</body> 
<script src="js/jquery-3.1.1.min.js"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/jquery.validate.js"></script> 

<script> 
$(document).ready(function(){ 
    $.validator.addClassRules({ 
     abc:{ 
      required:true 
     }, 
     jkl:{ 
      required:true 
     }, 
     xyz:{ 
      required:true 
     } 

    }); 



    $("form").validate(); 
}); 

</script> 
</html>

のドキュメントです：私がやっていることと同じことを述べて

https://jqueryvalidation.org/jQuery.validator.addClassRules/

。誰かが私を助けることができますか？

出典

2017-01-03 Chetan

属性をinput要素に使用する必要があります。下のスニペットでこれを見ることができます。これを強調表示するには、validateのdebugプロパティをtrueに設定しました。これは、例えば言うだろう：

<input type="text" class="abc error" aria-required="true">は

はまた、あなたがフォームに表示するエラーを取得するだけでなく validメソッドを呼び出す必要が割り当てられた名前がありません。

のでスニペットにあなたが試すことができます：

をエラーで提出 -
がエラーなしで提出する一切name属性を持たないとしてフラグ付けされている最初の行のinput秒が表示されます（最初のスニペットを実行しますもう一度） - 一部のname属性を最初の行に追加すると、目的の出力が得られます。

スニペット機能ではフォームの送信が許可されないため、フォームの送信をシミュレートするためにボタンのクリックで有効なメソッドと有効なメソッドをラップしました。 this link on Meta Stack Overflowを参照してください。

HTH

$("#test1").on("click", function() { 
 
    // add rules 
 
    $.validator.addClassRules({ 
 
    abc: { 
 
     required: true 
 
    }, 
 
    jkl: { 
 
     required: true 
 
    }, 
 
    xyz: { 
 
     required: true 
 
    } 
 
    }); 
 
    // validate form 
 
    $("form").validate({debug: true}); 
 
    $("form").valid(); 
 
}); 
 

 
$("#test2").on("click", function() { 
 
    // add name attributes to first row 
 
    $("td:eq(0)").children(0).attr("name", "foo1"); 
 
    $("td:eq(1)").children(0).attr("name", "foo2"); 
 
    $("td:eq(2)").children(0).attr("name", "foo3"); 
 
    // add rules 
 
    $.validator.addClassRules({ 
 
    abc: { 
 
     required: true 
 
    }, 
 
    jkl: { 
 
     required: true 
 
    }, 
 
    xyz: { 
 
     required: true 
 
    } 
 
    }); 
 
    // validate form 
 
    $("form").validate({debug: true}); 
 
    $("form").valid(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script> 
 

 
<center> 
 
    <div class="container"> 
 
    <h1>Welcome to boostrap</h1> 
 
    </div> 
 

 
    <form> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
      <input type="text" class="abc" /> 
 
     </td> 
 
     <td> 
 
      <input type="text" class="jkl" /> 
 
     </td> 
 
     <td> 
 
      <input type="text" class="xyz" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <input name="foo4" type="text" class="abc" /> 
 
     </td> 
 
     <td> 
 
      <input name="foo5" type="text" class="jkl" /> 
 
     </td> 
 
     <td> 
 
      <input name="foo6" type="text" class="xyz" /> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    <!-- https://meta.stackoverflow.com/questions/339479/advise-that-submit-events-on-forms-does-not-work-on-code-snippets 
 
    <input type="submit" />--> 
 
    <input type="button" name="test1" id="test1" value="Submit with errors" /> 
 
    <input type="button" name="test2" id="test2" value="Submit with no errors" /> 
 
    </form> 
 

 
</center>

出典

2017-01-03 06:44:57

素晴らしいです。それはjqueryバリデータのドキュメントに記載されていますか？ – Chetan

第4段落の 'マークアップ勧告'：https://jqueryvalidation.org/reference/。 –

jqueryバリデーターaddClassRulesメソッドがすべての要素に適用されない

答えて

関連する問題