Materialize: Form input data-error does not show.

[ronanversendaal]

First of all I would like to say how happy i am with this framework. It has provided me with many features I like to use. I would like to insert form errors on my contact form when it is not filled in correctly. Unfortunately, using the attributes data-error and data-success does nothing to the input and I have not seen an open issue on this yet.

I am using the following markup:

<i class="material-icons prefix">account_circle</i>
    <input id="name" type="text" class="validate">
    <label for="name">Name</label>
</div>

I am programmaticly adding the data-error="name is required" once the form has not been filled in correctly. I have checked the javascript and I can see in the console that the data-error attribute is inserted into the corresponding label, but nothing changes. Adding the attributes natively also does not make any changes.

Please help me out. I will provide further information if needed.

[exp0nge]

You can use jQuery to add the errors.
e.g.

$('#error-message').html('<div class="card-panel red">' + errors+ '</div>');

[Clemzd]

I think using attr jquery function is a better practise and it works fine for me.
Considering you have your label in a variable called $label you can do

$label.attr('data-error','The name field is required');

Btw I don't know what is your needs but I have made an example for jquery-validation to be compatible with materialize if you're interested : https://jsfiddle.net/rz0zk5u6/2/

[Dogfalo]

Perhaps you are on an older build which did not support these.

[inyerade]

works with

$("#id").attr('data-error' , 'new text')

but not works with

$("#id").data('error' , 'new text')

[ipereto]

@Clemzd This code not work when change class of the field datefield to datepicker of materializecss, because the attribute data-error is present but it is not show in the frontend. I see that ::after is not present. Anyone know what happend with this? I'm trying to fix this, but we can solve it together easyly.

Sorry for my english.

You can see in the image that ::after in into the label Standard Field 2, but in the date field ::after is not present and I think that for that reason data-error is not present in the UI.

[ipereto]

Hello guys,

Thank you @Clemzd, I use your code to implement a datepicker and select to test the data-error in these fields.

https://jsfiddle.net/ipereto/28maedmf/

@ronanversendaal, I hope this can help to everyone that require this type of validation with materializecss in your software.

[khuznain]

You can use this code

$(document).on("blur", ".required", function (e) {
e.preventDefault();
//validate forms
if ($(this).val() === "") {
$(this).addClass("invalid");
$(this).parent().find("label").addClass("active");
} else {
$(this).removeClass("invalid");
}
});