real time validation in jquery on keypress , keyup and keydown -
here problem firstname , lastname performing validation please sort out when click on first name textfield validation should check firstname not last name .............................................................................................................
<html> <head> <title>s1</title> <style type="text/css"> body {font-family:"trebuchet ms",verdana;width:800px;} #info {color:#008000;font-weight:bold; } #age {width: 40px;} .error_msg { color: red;} #content{ color: red; } span.error {font-size: 11px; color: #d8000c; } .emsg{ color: red; } .hidden { visibility:hidden;} </style> </head> <body> <form method="post" id="forms1"> <fieldset> <legend><strong>please fill information</strong></legend> <table> <tbody> <tr> <td>first name:</td> <td><input type="text" id="fname" class="required name" /> <span class="emsg hidden">please enter valid name</span> </td> </tr> <tr> <td>last name:</td> <td><input type="text" id="lname" class="required name" /> <span class="emsg hidden">please enter valid name</span> </td> </tr> <tr> <td>age</td> <td><input type="text" id="age" maxlength="3" class="required age" /> </tr> <tr> <td>address:</td> <td><input type="text" id="address"/> </td> </tr> <tr> <td colspan="2"><input type="submit" value="save" id="save" /></td> </tr> </tbody> </table> </fieldset> </form> <p id="content"></p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function() { var $regexname=/^[a-z]+$/; $('.name').on('keypress keydown keyup',function() { if (!$(this).val().match($regexname)) { // there mismatch, hence show error message $('.emsg').removeclass('hidden'); $('.emsg').show(); } else { // else, not display message $('.emsg').addclass('hidden'); } }); }); </script> </body> </html>
you can try
$('.name').on('blur',function(){ if (!$(this).val().match($regexname)) { // there mismatch, hence show error message $(this).parent().find('.emsg').removeclass('hidden'); $(this).parent().find('.emsg').show(); }else{ // else, not display message $('.emsg').addclass('hidden'); } }); 
Comments
Post a Comment