I use Materialize CSS to make a form. In framework have the form validation, but because it can't detect incorrect validation so much. So I found JQuery Validation plugin. I think its good to integrate with Materialize CSS.

In Materialize CSS have 2 HTML classes and 2 HTML attributes to tell validation which user input.

• When **correct**, Materialize CSS will add valid class at input field (<input>) to make a green `border-bottom` and add data-success="[valid-text]" attribute at input field label (<label>) tags to show the valid text under the input field(<input>).
• When **incorrect**, Materialize CSS will add invalid class at input field (<input>) to make a red `border-bottom` and add data-error="[invalid-text]" attribute at input field label (<label>) tags to show the invalid text under the input field(<input>).

I'll try to read the JQuery Validation documentation with myself but I have no idea to make it following the Materialize CSS conditions because I don't know how to get validation status from JQuery Validation to add class and add attribute follow the Materialize CSS conditions.

Can someone help me what should I do from my code in jsFiddle?

Ps. Sorry for my bad English.

Ps.2 No error when test on localhost, but I don't know why don't show validtion text example in snipset.