Java Script form validation code showing same error

Question

vishalonne 12 Junior Poster in Training

12 Years Ago

Hi
I am trying to validate a form with different type of message for different error, but you can see Click Here the problem. Please guide me in solving this problem...
Partial Code of form.php-

<!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">
function notEmpty(elem, helperMsg){
  if(elem.value.length == 0){
     document.getElementById('divforTextBox').innerHTML = helperMsg; 
     elem.focus();
     return false;
  }
  document.getElementById('divforTextBox').innerHTML = ""; 
  return true;
}
</script>
</head>
<body id="main_body" >
   <img id="top" src="top.png" alt="">
     <div id="form_container"
    <form id="form_453570" class="appnitro"  method="post" action="insertform.php">
      <div class="form_description">
         <h1>cbse cs n ip looks forward for your valuable suggestion</h1>
        <p>Please fill all the <font color="#EC0006">*</font> marked fields in CAPITAL letters. All <font color="#EC0006">*</font> marked fields are mandatory</div>                      
        <ul >
        <li id="li_12" >
        <label class="description" for="element_12">First Name <font color="#EC0006">*</font> </label>
        <div>
    ngth="255" value="" onblur="notEmpty(document.getElementById('element_12'), 'Please Enter Your First Name')"/> <div id='divforTextBox'></div>
        </div> 
        </li>        
                <li id="li_13" >
        <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="" onblur="notEmpty(document.getElementById('element_12'), 'Please Enter Your Last Name')"/> <div id='divforTextBox'></div>
        </div> 
        </li>
<!-- Rest of the code -->
                <li id="li_11" >
        <li class="buttons">
                <input type="hidden" name="form_id" value="453570" />
        <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
        </li>
        </ul>
        </form>  
             <div id="footer"></div>
    </div>
    <img id="bottom" src="bottom.png" alt="">
    </body>
</html>

javascript

3 Contributors
11 Replies
236 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by Taywin

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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.

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

Infinite loop...

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

vishalonne 12 Junior Poster in Training · Answer 1 · 2012-07-30T09:30:16+00:00

vishalonne 12 Junior Poster in Training

12 Years Ago

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

vishalonne 12 Junior Poster in Training · Answer 2 · 2012-07-30T09:34:04+00:00

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

vishalonne 12 Junior Poster in Training · Answer 3 · 2012-07-30T09:43:50+00:00

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.

vishalonne 12 Junior Poster in Training · Answer 4 · 2012-07-30T17:15:25+00:00

vishalonne 12 Junior Poster in Training

12 Years Ago

Please guide me how can I do it?

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 5 · 2012-07-30T20:35:53+00:00

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

vishalonne 12 Junior Poster in Training · Answer 6 · 2012-07-31T03:20:32+00:00

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;
}

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 7 · 2012-07-31T08:20:08+00:00

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

formValidation

Your function never returns true.

Taywin 312 Posting Virtuoso · Answer 8 · 2012-07-31T12:35:18+00:00

Line 35 & 54, unreachable statements -- no need to be in there. When you have if-else statement and both return a value, any codes below it will be unreachable.

As pritaeas said, inner most of your if-condition should return something, or the last statement (return false) will be executed.