Simple form Validation – using javascript
Working of the form explained below is like, we validate the form on the run. The validation is done as we move from one text-box to another. We do not need to wait until all the fields are addressed and then pressing the submit button. You can have a more realistic view once you try the following code.
To start with, first of all, we need to have an html form.
Code – HTML – Registration Form
<body style="width: 98%;" onload="init()">
<div style="width: 40%; margin: auto; font-size: 20px;">
<form name="form" action="#" method="post" onsubmit="return mval();">
<fieldset>
<legend>Registration</legend>
<div class="clr"></div>
<label>First Name</label>
<input type="text" name="fname" id="fname" class="inp" onfocus="fcs('fname')"
onblur="dcs('fname')"/>
<div class="clr"></div>
<label>Last Name</label>
<input type="text" name="lname" id="lname" class="inp" onfocus="fcs('lname')"
onblur="dcs('lname')" />
<div class="clr"></div>
<label>Email</label>
<input type="text" name="email" id="email" class="inp" onfocus="fcs('email')"
onblur="dcs('email')" />
<div class="clr"></div>
<label>Username</label>
<input type="text" name="uname" id="uname" class="inp" onfocus="fcs('uname')"
onblur="dcs('uname')" />
<div class="clr"></div>
<label>Password</label>
<input type="password" name="pass1" id="pass1" class="inp" onfocus="fcs('pass1')"
onblur="dcs('pass1')" />
<div class="clr"></div>
<label>Re-enter Password</label>
<input type="password" name="pass2" id="pass2" class="inp" onfocus="fcs('pass2')"
onblur="dcs('pass2')" />
<div class="clr"></div><div class="clr"></div>
<div style="width:300px; margin: auto;">
<input type="submit" name="submit" value="Register" class="inp_s"/>
<input type="reset" name="reset" value="Clear" class="inp_c" onclick="clrall()" />
</div>
</fieldset>
</form>
</div>
</body>
Okay, so for the above registration form we need to apply some css.Style sheet – Registration Form.inp{ float: right; margin-right: 20px; width: 260px; height: 32px; border: 1px solid #acacac; } .clr{ clear: both; height: 10px; } label{ padding-left: 20px; } .inp_s, .inp_c{ width: 100px; height: 32px; font-size: 18px; } legend{ font-weight: bold; }Now we will see the javascript functions mentioned in the html code;Javascript – Registration Formfunction eval_email(ids){ var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if(reg.test(ids.value) == false){ ids.style.background = "#FA8258"; ids.style.border = "0px solid"; } } function cmp_pass(){ if(document.getElementById('pass1').value != document.getElementById('pass2').value){ document.getElementById('pass2').style.background = "#FA8258"; document.getElementById('pass2').style.border = "0px solid"; } } function fcs(ids){ var inp = document.getElementById(ids); inp.style.border = "1px solid #00FF00"; if(inp.style.background = "#FA8258") inp.style.background = ""; } function dcs(ids){ var inp = document.getElementById(ids); inp.style.border = "0px solid"; if(inp.value == '') inp.style.background = "#FA8258"; else inp.style.border = "2px solid #088A08"; if(ids == 'email') eval_email(inp); if(ids == 'pass2') cmp_pass(inp); } function mval(){ for(i=0;i<document.getElementsByTagName('input').length; i++) { var chk_one = document.getElementsByTagName('input')[i]; if(chk_one.style.background.length != 0){ alert("please fill all form contents"); return false; } } return false; } function clrall(){ for(i=0;i<document.getElementsByTagName('input').length; i++) { document.getElementsByTagName('input')[i].style.background = ''; document.getElementsByTagName('input')[i].style.border = '1px solid #acacac'; init(); } } function init(){ document.getElementsByTagName('input')[0].focus(); }Now we have done will the entire coding part. Now we will see how each javascript function works.First we will see ‘eval_email()‘ function:This function is for validating the email. The core part of this function is the regular expression. If you could have a better look at the regular expression, you can see some flaws. For example, by this rule, you can have a ‘.’ just before ‘@’. Currently, my rule is set to work for ids that support ‘.’ just before ‘@’.Next is ‘cmp_pass()‘ function:This function is used to compare the two passwords entered.Next ‘fcs()‘ function:This function is used to change the background color when we focus on a particular text-box.‘dcs()‘ function:This function does the main validation for the form. dcs() runs when we move the cursor away from the text-box. When the control is moved. the function first checks if the text-box is empty or not. Also it checks for correct format of email and comparison of passwords.‘mval()‘ function:This function is used as an additional precaution. This prevents the form from submitting if any of the fields are left blank.‘clrall()‘ function:This function is basically meant to clear the background color, when we click on the reset button.‘init()‘ function:This is for fixing the focus on the first text-box when the page loads.------------------------------------------------------------------Easy once you run it, try it out for yourself. Find out more under our EDUCATION label.Thank you. :)
No comments:
Post a Comment