Java Script form validation code showing same error

Junior Poster

185 posts since Jun 2009

Reputation Points: 22

Solved Threads: 0

Skill Endorsements: 0

0

The onblur for element 13 specifies element 12 in the call. Note that when you tab out of 12, the javascript triggers because 13 gets focus. Then because 12 is empty, you set it's focus back, which causes the onblur of 13 to trigger, thus overwriting the message from 12.

Posting Prodigy

Moderator

9,297 posts since Jul 2006

Reputation Points: 1,178

Solved Threads: 1,463

Skill Endorsements: 86

0

Sorry for this silly mistake.... let me check it

Junior Poster

185 posts since Jun 2009

Reputation Points: 22

Solved Threads: 0

Skill Endorsements: 0

0

My God... !
After changing the element_12 to element_13 My browser IE8 hanged... But in Chrome working fine with a little glich

Junior Poster

185 posts since Jun 2009

Reputation Points: 22

Solved Threads: 0

Skill Endorsements: 0

0

Infinite loop...

Posting Prodigy

Moderator

9,297 posts since Jul 2006

Reputation Points: 1,178

Solved Threads: 1,463

Skill Endorsements: 86

0

Loop I didn't used loop any where. Okay Pritaeas is it possible to give different id for <div> and call them inside function for example -

<script type="text/javascript">

function notEmpty(elem, helperMsg){

    if(elem.value.length == 0){

             document.getElementById('div id').innerHTML = helperMsg; 
        elem.focus();
        return false;
    }
       document.getElementById('div id').innerHTML = ""; 
    return true;
}
</script>
<input id="element_12" name="element_12" class="element text large" type="text" maxlength="255" value="" onblur="notEmpty(document.getElementById('element_12'), 'Please Enter Your First Name')"/> <div id='divforFirstName'></div>
<input id="element_13" name="element_13" class="element text large" type="text" maxlength="255" value="" onblur="notEmpty(document.getElementById('element_13'), 'Please Enter Your Last Name')"/> <div id='divforLastName'></div>

But I can't figure out how to pass the div id divforFirstName and divforLastName to the function dynamically.

Junior Poster

185 posts since Jun 2009

Reputation Points: 22

Solved Threads: 0

Skill Endorsements: 0

0

Loop I didn't used loop any where

When you tab out of elem12, elem13 gets focus and elem12 onblur is triggered. Because it is empty, elem12 gets focus, thus triggering elem13's onblur. Because it is empty, .... and so on. You need a way to break this loop.

Posting Prodigy

Moderator

9,297 posts since Jul 2006

Reputation Points: 1,178

Solved Threads: 1,463

Skill Endorsements: 86

0

Please guide me how can I do it?

Junior Poster

185 posts since Jun 2009

Reputation Points: 22

Solved Threads: 0

Skill Endorsements: 0

0

Perhaps a global variable to indicate that the onblur function should skip the set focus.

Posting Prodigy

Moderator

9,297 posts since Jul 2006

Reputation Points: 1,178

Solved Threads: 1,463

Skill Endorsements: 86

0

OK I have made lots of changes in my code and I'm almost reched at the finish point but I stuck at finish line. Error checking is working fine but if there is no error then after clicking on submit button insertform.php page is not opening (means Action attribute of form tag is not working) please help me in solving this -
This the form.php page where validation is happening -

<!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>Your Valuable Suggestion</title>
    <link rel="stylesheet" type="text/css" href="view.css" media="all" />
    <script  type="text/javascript" src="registration.js"></script>
    <script type="text/javascript" src="view.js"></script>
    </head>
    <body id="main_body" >
    <img id="top" src="top.png" alt="">
    <div id="form_container">
    <form id="form_453570" class="appnitro"  name="registration"  method="post" action="insertform.php" onSubmit="return formValidation(this)">
   <div class="form_description">
   <label class="description" for="element_12">First Name <font color="#EC0006">*</font> </label>
   <div> <input id="element_12" name="element_12" class="element text large" type="text" maxlength="255" value=""/>
   <div id="fnTextBox"></div>
   </div> 
   <label class="description" for="element_13">Last Name <font color="#EC0006">*</font></label>
   <div> <input id="element_13" name="element_13" class="element text large" type="text" maxlength="255" value=""/> 
   <div id="lnTextBox"></div>
   </div> 
   <label class="description" for="element_5">Email <font color="#EC0006">*</font></label>
   <div>
   <input id="element_5" name="element_5" class="element text large" type="text" maxlength="255" value=""/> 
   <div id="emTextBox"></div>
   </div> 
   <label class="description" for="element_11">Sex <font color="#EC0006">*</font></label>
   <span>
   <input id="element_11_1" name="element_11" class="element radio" type="radio" value="1" />
   <label class="choice" for="element_11_1">Male</label>
   <input id="element_11_2" name="element_11" class="element radio" type="radio" value="2" />
   <label class="choice" for="element_11_2">Female</label>
   </span> 
   <div id="sxRadio"></div>
   <label class="description" for="element_1">School Name <font color="#EC0006">*</font></label>
   <div> 
   <input id="element_1" name="element_1" class="element text large" type="text" maxlength="255" value=""/> 
   <div id="snTextBox"></div>
   </div> 
   <input type="hidden" name="form_id" value="453570" />
   <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
   </form>   
   <div id="footer"></div>
   </div>
   <img id="bottom" src="bottom.png" alt="">
   </body>
   </html>

Here is the code of registration.js

function formValidation()
{
   var fn = document.registration.element_12;
   var ln = document.registration.element_13;
   var sx = document.registration.element_11;
   var sn = document.registration.element_1;
   if(fname_validation(fn,5)){
     if(lname_validation(ln,5)){
       if(ValidateEmail(em)){
         if(validsex(sx)){ 
           if(validSchoolName(sn)){
       }
         }
       }
     }
   }
   return false;
} 
function fname_validation(fn,mx){
   var letters = /^[A-Za-z]+$/;
   var fn_len = fn.value.length;
   if (fn_len == 0 || fn_len < mx)   {
       document.getElementById('fnTextBox').innerHTML = "Enter your First name/ Minimum length is 5 characters ";
       fn.focus();     
       return false;
   }
   if(fn.value.match(letters))   {
      return true;  
   }
   else   {
       document.getElementById('fnTextBox').innerHTML = "Name must not contain other than alphabet";
       fn.focus();
       return false; //alert("User Id should not be empty / length be between "+mx+" to "+my);
   }
   return true;
}

function lname_validation(ln,mx){
   var letters = /^[A-Za-z]+$/;
   var ln_len = ln.value.length;
   if (ln_len == 0 || ln_len < mx)   {
     document.getElementById('lnTextBox').innerHTML = "Enter your Last name/ Minimum length is 5 characters ";
       ln.focus();
       return false;
   }
   if(ln.value.match(letters)){
    return true;
   }
   else{
       document.getElementById('lnTextBox').innerHTML = "Name must not contain other than alphabet";
       ln.focus();
       return false; //alert("User Id should not be empty / length be between "+mx+" to "+my);
   }
   return true;
}

function validsex(sx){
       if(!(sx[0].checked || sx[1].checked)){
           document.getElementById('sxRadio').innerHTML = "Select your Sex";
           sx[0].focus();
           return false;
    }
    return true;
}

function ValidateEmail(em){
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(em.value.match(mailformat)){
        return true;
    }
    else{
       document.getElementById('emTextBox').innerHTML = "Enter Valid EMail ID";
       em.focus();
       return false;
    }
} 

function validSchoolName(sn){
   var sn_len = sn.value.length;
   if (sn_len == 0){
       document.getElementById('snTextBox').innerHTML = "Enter your School Name";
       sn.focus();
       return false;
   }
   return true;
}

Junior Poster

185 posts since Jun 2009

Reputation Points: 22

Solved Threads: 0

Skill Endorsements: 0

0

formValidation

Your function never returns true.

Posting Prodigy

Moderator

9,297 posts since Jul 2006

Reputation Points: 1,178

Solved Threads: 1,463

Skill Endorsements: 86