Materialize CSS Custom Form Validation Error Message

Question

everyone! I'm trying to create my registration form using Materialize CSS and jQuery Validation plugin ( https://jqueryvalidation.org/ ).

Just wanted to know how do I put the custom error messages that I had set for each validation rule in the plugin into the data-error attribute of the input element?

According to Materialize CSS's Documentation ( http://materializecss.com/forms.html ), we can add custom validation error messages by adding data-error attribute to our input field labels. But this only shows ONE message for any validation rules that are broken.

I want to display the appropriate error message for the specific validation rule that the user breaks.

Here is my form:

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

And here is my validate method:

$("#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."
    }
}
});

Or is there another way of displaying the custom error messages into the validation message label of the input element in Materialize?

Answer 1

There is a section called Custom Error and Success Messages here - http://materializecss.com/forms.html

What you should use is the data-error attribute placed on the label.

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

Of course if you want to make the message dynamic you need to use some more logic, but the message needs to go in the data-error attribute.

Hope this helps.

Answer 2

只需在输入中添加 required="" 或 required ，它应该可以正常工作

Answer 3

Try adding to this to your method :

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

Answer 4

According to the materialize 1.0.0 documentation you need to add a tag span with the data-error and data-success attributes after the tag 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>