javascript - Live validation instead of on button click validation -
i able use live page validation instead of valid or invalid message showing after pressing submit, code validates email address , when submit clicked input displays below followed valid or invalid, if valid in green , if invalid in red. here code:
<!doctype html> <html> <head> <script class="jsbin" src="http:ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <meta charset=utf-8 /> <title>email validation</title> </head> <body> <form onsubmit='validate(); return false;'> <p>enter email address:</p> <input id='email' placeholder="example@example.com" size="21"> <button type='submit' id='validate'>submit</button> </form> <br/> <h2 id='result'></h2> <script> function validateemail(email) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-za-z\-0-9]+\.)+[a-za-z]{2,}))$/; return re.test(email); } function validate(){ $("#result").text(""); var email = $("#email").val(); if (validateemail(email)) { $("#result").text(email + " valid"); $("#result").css("color", "green"); } else { $("#result").text(email + " not valid"); $("#result").css("color", "red"); } return false; } $("form").bind("submit", validate); </script> </body> </html>
you can use onchange() event of email input call validate() method instead of submit button or can call on both events...
example:
<input id='email' placeholder="example@example.com" size="21" onchange="validate()"> 
Comments
Post a Comment