php - How to create Form validation error message at runtime? -

i have been searching hours trying find way validate form while user typing. example, want have field zip code. want user see message underneath field says have gone beyond limit of characters field before submit form. how can done?

with such code:

<form method="post" name="wrriregistration" target="_blank"><center> <table width="100%"> <tbody> <tr> <td width="149"><strong>*first name:</strong></td> <td width="229"><input type="text" name="first_name" size="35" maxlength="100"/></td> <td width="123"><strong style="display:none;">middle initial:</strong></td> <td width="659"><input style="display:none;" type="text" name="middle_initial" size="35" maxlength="50" /></td> </tr> </tbody> </table> </form> 

try :

html

<input type="text" name="first_name"> <div id="error">     custom error </div> 

css

#error {     display: none; }  #error.show {     display: block; }  input {     color: #000000; }  .invalid {     color: #ff0000; } 

js

var input = document.queryselector('[name="first_name"]'); var error = document.getelementbyid('error');  input.addeventlistener('keydown', function(){     // whatever want     if(this.value.length >= 10) {         this.classlist.add('invalid');         // can control style of invalid input .invalid         error.classlist.add('show'); // display custom error     } else {         this.classlist.remove('invalid');         error.classlist.remove('show');     } }); 

edit explanation :

var input target first_name input

addeventlistener makes event detection. passed argument 'keydown', javascript listen keys pressed.

classlist api manipulate classes (not supported ie).

try here : https://jsfiddle.net/e3oe4ykf/