Automatic email validation
No JavaScript or attribute pattern required.
No JavaScript or attribute pattern required.
Using regular expressions to validate inputs inside a form will always show up an automatic hint message if it is not valid.
You can use input’s attributes as min, max, pattern and so on, and then checking a simple class do what you need to. In this example we are using a Text Field component of Material Design Lite (MDL) which shows a message and a red mark up when the value is not the right one. You could extend this with as many inputs as you like and then if all of them are correct show a login button or whatever.
Note that in old browsers and android versions before Lolipop where the Web View isn’t Chrome you will need to use directly Validation DOM Methods. Ex:
document.querySelector('input').validity.rangeOverflow
Be careful because even some Validation DOM Methods are not well supported in old browsers versions.