2016-10-22 214 views
0

我是Jquery的新手,我試圖驗證我的表單。我的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代碼。

$("#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" 
     }  
    }, 

這裏我的問題是,當我進入我的輸入文本的值小於最小長度,即在任的文本框9,它給我:

"Please enter 9 characters." 

然而,我想要這個消息被定製爲

"Please enter 9 digit Number for firstNumber". 

這是可能通過jQuery驗證插件?或者我應該使用任何第三方庫?

任何幫助將不勝感激。

回答

1

由於您使用jQuery驗證與HTML5數據屬性的規則,你可以考慮改變:

來自:

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>