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

Question

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

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

根据 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 中输入元素的验证消息标签中？

Answer 1

Materialise 文档中有一个名为“自定义错误和成功消息”的部分。

您应该使用标签上的 data-error 属性。

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

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

希望这可以帮助。

Answer 2

只需在输入中添加 required="" 或 required 即可正常工作