i trying simple form validation using jquery. try validate input boxes on blur , focus. validating first input validate user first name.it not functioning properly.
can please me?
html & js code:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> test </title> <style type="text/css"> .showerror{ display:block; } .noshowerror{ display:none; } .remerr{ display:none; } .redborder{ border:#f00 solid 1px; background-color:yellow; } .greenborder { border:#0f3 solid 1px; background-color:#6f6; } </style> </head> <body> <div style="width:450px"> <div style="float:left"> <table> <form id="eg"> <tr> <td> <label> name: </label> <td> <input type="text" id="name" /> </tr> <tr> <td> <label> surname: </label> <td> <input type="text" id="surname" /> </tr> <tr> <td> <label> email: </label> <td> <input type="text" id="email" /> </tr> <tr> <td> <label> number: </label> <td> <input type="text" id="number" /> </tr> <tr> <td> <label> age: </label> <td> <input type="text" id="age" /> </tr> <tr> <td> <label> comment: </label> <td> <input type="text" id="comment" /> </tr> <tr> <td> <label> password </label> <td> <input type="password" id="pwd" /> </tr> <tr> <td> <label> confirm password </label> <td> <input type="password" id="cnfmpwd" /> </tr> <tr> <td colspan="2"> <input type="submit" value="test" /> </td> </tr> </form> </table> </div> <div style="float:right"> <p id="fail" class="noshowerror" > please enter name </p> <p id="nameerr2" class="remerr"> name correct </p> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script> <script type="text/javascript"> $(document).ready(function () { if ($("#name").val('')) { $("#name").val('name please'); } $('#name').focus(function () { if ($('#name').val() == 'name please') { $('#name').val(""); } }); $('#name').blur(function () { var nameregex = /^[a-za-z]+$/; var fname = document.getelementbyid("name").value; if (!nameregex.test(fname)) { $("#name").addclass('redborder'); } else if (fname == " ") { $("#name").addclass('redborder'); } else { $("#name").addclass('greenborder'); return false; } }); }); </script> </body> </html> thanks in advance
i have refined our code , working intended, there several mistake in defining elements within table,may can have @ code on how define .
html code:
<body> <div style="width:450px"> <div style="float:left"> <form id="eg" action="/"> <table> <tr> <td> <label>name:</label> </td> <td> <input type="text" id="name" /> </td> </tr> <tr> <td> <label>surname:</label> </td> <td> <input type="text" id="surname" /> </td> </tr> <tr> <td> <label>email:</label> </td> <td> <input type="text" id="email" /> </td> </tr> <tr> <td> <label>number:</label> </td> <td> <input type="text" id="number" /> </td> </tr> <tr> <td> <label>age:</label> </td> <td> <input type="text" id="age" /> </td> </tr> <tr> <td> <label>comment:</label> </td> <td> <input type="text" id="comment" /> </td> </tr> <tr> <td> <label>password</label> </td> <td> <input type="password" id="pwd" /> </td> </tr> <tr> <td> <label>confirm password</label> </td> <td> <input type="password" id="cnfmpwd" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="test" onclick="return false;" /> </td> </tr> </table> </form> </div> </div> <div style="float:right"> <p id="fail" class="noshowerror">please enter name</p> <p id="nameerr2" class="remerr">name correct</p> </div> </body> js code:
$(document).ready(function () { if ($("#name").val('')) { $("#name").val('name please'); } $('#name').focus(function () { if ($('#name').val() == 'name please') { $('#name').val(""); } }); $('#name').blur(function () { var nameregex = /^[a-za-z]+$/; // var fname = document.getelementbyid("name").value; var fname = $("#name").val(); alert(nameregex.test(fname)); if (!(nameregex.test(fname))) { $("#name").removeclass('greenborder').addclass('redborder'); } else if (fname == " ") { $("#name").removeclass('greenborder').addclass('redborder'); } else { $("#name").removeclass('redborder').addclass('greenborder'); return false; } }); }); when using jquery lib, make sure make of it, have seen there raw javascript syntax in code. jquery designed make things easier reducing syntax.
edited: have refined code, code work on number of times.
happy coding :)
Comments
Post a Comment