Materialize CSS Input Text Validation

Hello.

I am creating a simple localhost system for user data management. This is first time I’m using CSS Framework from Materialize CSS. Actually this is a first time I’m using any client-side framework.

I already finish building the system and transform it with Materialize CSS. However I have one problem that I unable to solve. How to implement input validation?.

As you can see, the documentation does not help much. I unable to figure how to implement input length requirement, required input, and retype password input to be valid and invalid. Is there any javascript to use and how to implement the javascript?

If anyone can help me here, you can point me to any web tutorial or article or you can teach me here. If possible, I don’t want to do server-side validation (which I know how to do).

I’m using latest Materialize CSS 1.0.0.

I can use HTML, Javascript, DOM, VB, C#, VBScript.
I am currently learning to use javascript framework such as jQuery and Node.js.

Any help related, I really appreciate. Thanks.

  1. You can try to make use of HTML5 validation attributes
  • check for attributes like required , minlength , maxlength , pattern to directly add in your input elements
  • Materialize’s CSS add visual cues for valid and invalid fields