javascript - 无法自定义 jQuery 验证消息

Question

我是 Jquery 新手，我正在尝试验证我的表单。附件是我的 HTML5 代码。

<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 验证插件实现吗？或者我应该使用任何第三方库吗？？

任何帮助将不胜感激。

Answer 1

因为您正在使用 jQuery Validate 和 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>