2016-10-22 216 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>