Question

大家好！我正在尝试使用Materialise CSS和jQuery Validation插件（https://jqueryvalidation.org/）创建我的注册表单。

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

根据Materialise 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."
    }
}
});

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

Answer 1

此处有一个名为自定义错误和成功消息的部分 - http://materializecss.com/forms.html

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

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

当然，如果您想使消息动态化，则需要使用更多逻辑，但消息需要包含在data-error属性中。

希望这有帮助。

Answer 2

只需添加required =＆＃34;＆＃34;或要求输入，它应该工作得很好

Answer 3

尝试将其添加到您的方法中：

    errorElement: 'div',
errorPlacement: function (error, element) {
    var placement = $(element).data('error');
    if (placement) {
        $(placement).append(error)
    } else {
        error.insertAfter(element);
    }
}

Answer 4

根据materialize 1.0.0 documentation，您需要在标签span之后添加具有data-error和data-success属性的标签label。

<div class="input-field inline">
  <input id="email_inline" type="email" class="validate">
  <label for="email_inline">Email</label>
  <span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>

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

4 个答案: