Question

我是Jquery的新手，我正在尝试验证我的表单.Attached是我的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 Validation Plugin实现吗？或者我应该使用任何第三方库？

任何帮助都将受到高度赞赏。

Answer 1

因为您正在使用jQuery Validate with HTML5 Data Attribute Rules，您可以考虑更改：

从：

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

段：

＆＃13;

$("#form-register").validate();

$('input[type="submit"]').on('click', function(e) {
  if(!$("#form-register").valid()){
    e.preventDefault();
}
});

＆＃13;

<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>

＆＃13;

无法自定义jQuery验证消息

1 个答案: