2016-10-22 11 views
0

私はJqueryを初めて使用しています。私はform.Attachedを検証しようとしています。私のHTML5コードです。jQueryの検証メッセージをカスタマイズできません

<form action="" method="post" id="form-register"> 
    <input type="text" id="firstNumber" class="form-control" data-rule- 
      minlength="9" data-rule-maxlength="9" data-rule-number="true" data- 
      rule-required="true" data-msg-required="true" /> 
    <input type="text" id="SecondNumber" class="form-control" data-rule- 
      minlength="9" data-rule-maxlength="9" data-rule-number="true" data- 
      rule-required="true" data-msg-required="true" /> 
    <input type="submit" value="submit"> 
</form> 

次のJqueryコードがあります。私は最小の長さのテキストボックスのいずれかで、すなわち9以下である私の入力テキストに値を入力するとここで

$("#form-register").validation({ 
    messages: { 
     firstNumber: { 
      required:"first number is required", 
      number: "Please enter only numbers for Claim number 1 ", 
      minlength: "Please enter 9 digit Number for First number ", 
      maxlength: "Please enter 9 digit Number for First number" 
     }, 
     secondNumber: { 
      required:"Second number is required", 
      number: "Please enter only numbers for Second number", 
      minlength: "Please enter 9 digit Number for Second number ", 
      maxlength: "Please enter 9 digit Number for Second number" 
     }  
    }, 

私の質問は、それは私に与えているされています。しかし

"Please enter 9 characters." 

このメッセージをカスタマイズするには

"Please enter 9 digit Number for firstNumber". 

これはjQuery Validation Pluginで可能ですか?または私はサードパーティのライブラリを使用する必要がありますか?

ご協力いただければ幸いです。あなたはHTML5データ属性とjQueryの検証を使用しているため

答えて

1

あなたが変更することを検討してルール:

から:

data-msg-required="true" 

へ:

data-msg-required="first number is required" 
data-msg-number="Please enter only numbers for Claim number 1" 
data-msg-minlength="Please enter 9 digit Number for First number" 
data-msg-maxlength="Please enter 9 digit Number for First number" 

あなたは見にかかることがあります: this article

スニペット:

$("#form-register").validate(); 
 

 
$('input[type="submit"]').on('click', function(e) { 
 
    if(!$("#form-register").valid()){ 
 
    e.preventDefault(); 
 
} 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script> 
 

 
<form action="" method="post" id="form-register"> 
 
    <input type="text" id="firstNumber" class="form-control" data-rule- 
 
      minlength="9" data-rule-maxlength="9" data-rule-number="true" data-rule-required="true" 
 
      data-msg-required="first number is required" 
 
      data-msg-number="Please enter only numbers for Claim number 1" 
 
      data-msg-minlength="Please enter 9 digit Number for First number" 
 
      data-msg-maxlength="Please enter 9 digit Number for First number"/> 
 
    <input type="text" id="SecondNumber" class="form-control" data-rule- 
 
      minlength="9" data-rule-maxlength="9" data-rule-number="true" data-rule-required="true" 
 
      data-msg-required="Second number is required" 
 
      data-msg-number="Please enter only numbers for Second number" 
 
      data-msg-minlength="Please enter 9 digit Number for Second number" 
 
      data-msg-maxlength="Please enter 9 digit Number for Second number"/> 
 
    <input type="submit" value="submit"> 
 
</form>

関連する問題