Index Labels

Form Validation using JavaScript.

. at . No comments:

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 Form




function 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. :)
TECHNOLOGY

No comments:

Post a Comment

Recommend Us On Google
Like Us On Facebook
Subscribe to CommuniqueWorld

Popular Posts

Contact Form

Name

Email *

Message *