Materialise CSS 自定义表单验证错误消息

Question

每个人！我正在尝试使用 Materialise CSS 和 jQuery Validation 插件 ( https://jqueryvalidation.org/ ) 创建我的注册表单。

只是想知道如何将我为插件中的每个验证规则设置的自定义错误消息放入输入元素的数据错误属性中？

根据 Materialize CSS 的文档 ( http://materializecss.com/forms.html )，我们可以通过将 data-error 属性添加到我们的输入字段标签来添加自定义验证错误消息。但是对于任何被破坏的验证规则，这只会显示一条消息。

我想为用户违反的特定验证规则显示适当的错误消息。

这是我的表格：

 <form id="reg-form">
<div class="row">
    <div class="input-field col s6">
        <input id="firstname" name="fname" type="text"/>
        <label for="firstname">First Name</label>
    </div>
    <div class="input-field col s6">
        <input id="lastname" name="lname" type="text">
        <label for="lastname">Last Name</label>
    </div>
</div>
<div class="row">
    <div class="input-field col s12">
        <input id="email" name="email" type="email" required/>
        <label for="email">Email</label>
    </div>
</div>
<div class="row">
    <div class="input-field col s12">
        <input id="password" name="pass" type="password" required/>
        <label for="password">Password</label>
    </div>
</div>
<div class="row">
    <div class="input-field col s12">
        <input id="confirm-password" name="confirm_pass" type="password" required/>
        <label for="confirm-password">Confirm Password</label>
    </div>
</div>
<div class="row">
    <div class="col s12 right-align">
        <button class="btn btn-large" type="submit" name="action">
            Submit
        </button>
    </div>
</div>

这是我的验证方法：

 $("#reg-form").validate({
rules: {
    fname: {
        required: true,
        minlength: 2
    },
    lname: {
        required: true,
        minlength: 2
    },
    mobile_num: {
        required: true,
        minlength: 10,
        maxlength: 10
    },
    email: {
        required: true,
        email:true
    },
    pass: {
        required: true,
        minlength: 5
    },
    confirm_pass: {
        required: true,
        minlength: 5,
        equalTo: "#pass"
    }
},
//For custom messages
messages: {
    fname: {
        required: "Please enter your first name.",
        minlength: "You sure you're named with one letter?"
    },
    lname: {
        required: "Please enter your last name.",
        minlength: "You sure you're named with one letter?"
    },
    email: {
        required: "Please enter your email address.",
        email: "Please enter a valid email address."
    },
    pass: {
        required: "Please enter a password.",
        minlength: "Password must be atleast 5 characters."
    },
    confirm_pass: {
        required: "Please confirm your password.",
        minlength: "Password must be atleast 5 characters.",
        equalTo: "Password does not match."
    }
}
});

或者是否有另一种方法可以将自定义错误消息显示到 Materialize 中输入元素的验证消息标签中？

原文由 N Petterson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Materialise 的文档 中有一个名为 Custom Error and Success Messages 的部分。

您应该使用的是放置在标签上的数据错误属性。

 <label for="firstname" data-error="Please enter your first name.">First Name</label>

当然，如果你想让消息动态化，你需要使用更多的逻辑，但消息需要进入 data-error 属性。

希望这可以帮助。

原文由 Marko Francekovic 发布，翻译遵循 CC BY-SA 4.0 许可协议