Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Java Script form validation code showing same error 1

Status
Not open for further replies.
vishalonne

vishalonne

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

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<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>
		<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='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="" [COLOR=red]onblur="notEmpty(document.getElementById('element_12'), 'Please Enter Your Last Name')"/> <div id='divforTextBox'>[/color]</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>
 
Sort by date Sort by votes
Hi

First of all, [tt]id[/tt]s must be unique. You have two [tt]div[/tt]s with the [tt]id[/tt] divforTextBox. That will cause problems. Anyway, you are kind of abusing the [tt]id[/tt]s. In this case a [highlight #ffc][tt]class[/tt] will be enough[/highlight] and the script can [highlight #cfc]search for the first one[/highlight] following the [tt]input[/tt].

Regarding the validation, one way is to use regular expressions and store all the rules along the corresponding message in an object :
JavaScript: 
[b]var[/b] rule [teal]=[/teal] [teal]{[/teal]
  element_12[teal]:[/teal] [teal][[/teal]
    [teal][[/teal][fuchsia]/^$/[/fuchsia][teal],[/teal]       [green][i]'Can not be empty'[/i][/green][teal]],[/teal]
    [teal][[/teal][fuchsia]/^.$/[/fuchsia][teal],[/teal]      [green][i]'Must have at least 2 characters'[/i][/green][teal]],[/teal]
    [teal][[/teal][fuchsia]/.{256,}/[/fuchsia][teal],[/teal]  [green][i]'Must have at most 255 characters'[/i][/green][teal]],[/teal]
    [teal][[/teal][fuchsia]/\d/[/fuchsia][teal],[/teal]       [green][i]'Can not contain digits'[/i][/green][teal]],[/teal]
  [teal]],[/teal]
  element_13[teal]:[/teal] [teal][[/teal]
    [teal][[/teal][fuchsia]/^$/[/fuchsia][teal],[/teal]       [green][i]'Can not be empty'[/i][/green][teal]],[/teal]
    [teal][[/teal][fuchsia]/^.{1,2}$/[/fuchsia][teal],[/teal] [green][i]'Must have at least 3 characters'[/i][/green][teal]],[/teal]
    [teal][[/teal][fuchsia]/.{256,}/[/fuchsia][teal],[/teal]  [green][i]'Must have at most 255 characters'[/i][/green][teal]],[/teal]
  [teal]],[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]notEmpty[/color][teal]([/teal]elem[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] errorcontainer [teal]=[/teal] elem[teal];[/teal]
  [b]var[/b] result [teal]=[/teal] [b]true[/b][teal];[/teal]

  [highlight #cfc][b]do[/b] [teal]{[/teal][/highlight]
    [highlight #cfc]errorcontainer [teal]=[/teal] errorcontainer[teal].[/teal]nextSibling[teal];[/teal][/highlight]
    [highlight #cfc][b]if[/b] [teal]([/teal]errorcontainer [teal]==[/teal] [b]null[/b][teal])[/teal] [b]return[/b] result[teal];[/teal][/highlight]
  [highlight #cfc][teal]}[/teal] [b]while[/b] [teal]([/teal]errorcontainer[teal].[/teal]className [teal]!=[/teal] [green][i]'errorcontainer'[/i][/green][teal]);[/teal][/highlight]
  errorcontainer[teal].[/teal]innerHTML [teal]=[/teal] [green][i]''[/i][/green][teal];[/teal]

  [b]if[/b] [teal](![/teal] [teal]([/teal]elem[teal].[/teal]name [b]in[/b] rule[teal]))[/teal] [b]return[/b] result[teal];[/teal]

  [b]for[/b] [teal]([/teal][b]var[/b] i [teal]=[/teal] [purple]0[/purple][teal],[/teal] l [teal]=[/teal] rule[teal][[/teal]elem[teal].[/teal]name[teal]].[/teal]length[teal];[/teal] i [teal]<[/teal] l[teal];[/teal] i[teal]++)[/teal] [teal]{[/teal]
    [b]if[/b] [teal]([/teal]elem[teal].[/teal]value[teal].[/teal][COLOR=darkgoldenrod]match[/color][teal]([/teal]rule[teal][[/teal]elem[teal].[/teal]name[teal]][[/teal]i[teal]][[/teal][purple]0[/purple][teal]]))[/teal] [teal]{[/teal]
      errorcontainer[teal].[/teal]innerHTML [teal]+=[/teal] rule[teal][[/teal]elem[teal].[/teal]name[teal]][[/teal]i[teal]][[/teal][purple]1[/purple][teal]][/teal] [teal]+[/teal] [green][i]'<br>'[/i][/green][teal];[/teal]
      result [teal]=[/teal] [b]false[/b][teal];[/teal]
    [teal]}[/teal]
  [teal]}[/teal]

  [b]return[/b] result[teal];[/teal]
[teal]}[/teal]

When calling it pass only a [highlight #fcc]reference to the current element[/highlight] to notEmpty() :
HTML: 
    [b]<li[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"li_12"[/i][/green] [b]>[/b]
    [b]<label[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"description"[/i][/green] [maroon]for[/maroon][teal]=[/teal][green][i]"element_12"[/i][/green][b]>[/b]First Name [b]<font[/b] [maroon]color[/maroon][teal]=[/teal][green][i]"#EC0006"[/i][/green][b]>[/b]*[b]</font>[/b] [b]</label>[/b]
    [b]<div>[/b]
    [b]<input[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"element_12"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"element_12"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"element text large"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]maxlength[/maroon][teal]=[/teal][green][i]"255"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]onblur[/maroon][teal]=[/teal][green][i]"notEmpty([highlight #fcc]this[/highlight])"[/i][/green][b]/>[/b] [b]<div[/b] [highlight #ffc][maroon]class[/maroon][teal]=[/teal][green][i]"errorcontainer"[/i][/green][/highlight][b]></div>[/b]
    [b]</div>[/b] 
    [b]</li>[/b]   
    [b]<li[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"li_13"[/i][/green] [b]>[/b]
    [b]<label[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"description"[/i][/green] [maroon]for[/maroon][teal]=[/teal][green][i]"element_13"[/i][/green][b]>[/b]Last Name [b]<font[/b] [maroon]color[/maroon][teal]=[/teal][green][i]"#EC0006"[/i][/green][b]>[/b]*[b]</font></label>[/b]
    [b]<div>[/b]
    [b]<input[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"element_13"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"element_13"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"element text large"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]maxlength[/maroon][teal]=[/teal][green][i]"255"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]onblur[/maroon][teal]=[/teal][green][i]"notEmpty([highlight #fcc]this[/highlight])"[/i][/green][b]/>[/b] [b]<div[/b] [highlight #ffc][maroon]class[/maroon][teal]=[/teal][green][i]"errorcontainer"[/i][/green][/highlight][b]></div>[/b]
    [b]</div>[/b] 
    [b]</li>[/b]

Feherke.
[link feherke.github.com/][/url]
 
Upvote 0 Downvote
Hi Feherke

You are again here to help. Thank you buddy...! I am done with the sample you mentioned. Its working What I have to do for validating radio button -
HTML: 
<!-- ... -->
<li id="li_8" >
<label class="description" for="element_8">Stream <font color="#EC0006">*</font></label>
<span>
   <input id="element_8_1" name="element_8" class="element radio" type="radio" value="1" />
   <label class="choice" for="element_8_1">Humanities</label>
   <input id="element_8_2" name="element_8" class="element radio" type="radio" value="2" />
   <label class="choice" for="element_8_2">Commerce</label>
   <input id="element_8_3" name="element_8" class="element radio" type="radio" value="3" />
  <label class="choice" for="element_8_3">Science</label>
</span> 
</li>	
<!-- ... -->
And corsor don't focus on the blank box it moves to next component.

 
Upvote 0 Downvote
Hi

Well, you should validate [tt]radio[/tt] buttons separately. Their validation should be done per group, while the [tt]onblur[/tt] event refers to one element.

Beside this, note that the user may directly click the [tt]submit[/tt] button, in which case neither the [tt]text[/tt] [tt]input[/tt] validations will be triggered. ( Anyway, I hope you are validating the data on server side too, in your PHP script. )

So I would
[ul]
[li]Make another function to trigger all validations and call it [tt]onsubmit[/tt].[/li]
[li]Make a dedicated function to check [tt]radio[/tt] buttons.[/li]
[li]Move the error container lookup in a separate function so can be used by the[/li]
[/ul]
[tt]radio[/tt] button validator function too.
JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]geterrorcontainer[/color][teal]([/teal]elem[teal])[/teal]
[teal]{[/teal]
  [b]do[/b] [teal]{[/teal]
    elem [teal]=[/teal] elem[teal].[/teal]nextSibling[teal];[/teal]
  [teal]}[/teal] [b]while[/b] [teal]([/teal]elem [teal]!=[/teal] [b]null[/b] [teal]&&[/teal] elem[teal].[/teal]className [teal]!=[/teal] [green][i]'errorcontainer'[/i][/green][teal]);[/teal]

  [b]return[/b] elem[teal];[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]notEmpty[/color][teal]([/teal]elem[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal](![/teal] [teal]([/teal]elem[teal].[/teal]name [b]in[/b] rule[teal]))[/teal] [b]return[/b] result[teal];[/teal]

  [b]var[/b] error [teal]=[/teal] [green][i]''[/i][/green][teal];[/teal]
  [b]for[/b] [teal]([/teal][b]var[/b] i [teal]=[/teal] [purple]0[/purple][teal],[/teal] l [teal]=[/teal] rule[teal][[/teal]elem[teal].[/teal]name[teal]].[/teal]length[teal];[/teal] i [teal]<[/teal] l[teal];[/teal] i[teal]++)[/teal]
    [b]if[/b] [teal]([/teal]elem[teal].[/teal]value[teal].[/teal][COLOR=darkgoldenrod]match[/color][teal]([/teal]rule[teal][[/teal]elem[teal].[/teal]name[teal]][[/teal]i[teal]][[/teal][purple]0[/purple][teal]]))[/teal]
      error [teal]+=[/teal] rule[teal][[/teal]elem[teal].[/teal]name[teal]][[/teal]i[teal]][[/teal][purple]1[/purple][teal]][/teal] [teal]+[/teal] [green][i]'<br>[/i][/green][lime][i]\n[/i][/lime][green][i]'[/i][/green][teal];[/teal]

  [COLOR=darkgoldenrod]geterrorcontainer[/color][teal]([/teal]elem[teal]).[/teal]innerHTML [teal]=[/teal] error[teal];[/teal]
  [b]if[/b] [teal]([/teal]error[teal])[/teal] elem[teal].[/teal][COLOR=darkgoldenrod]focus[/color][teal]();[/teal]

  [b]return[/b] error [teal]==[/teal] [green][i]''[/i][/green][teal];[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]checkradio[/color][teal]([/teal]form[teal],[/teal]name[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] checked [teal]=[/teal] [b]false[/b][teal];[/teal]
  [b]for[/b] [teal]([/teal][b]var[/b] i [teal]=[/teal] [purple]0[/purple][teal],[/teal] l [teal]=[/teal] form[teal].[/teal]elements[teal][[/teal]name[teal]].[/teal]length[teal];[/teal] i [teal]<[/teal] l[teal];[/teal] i[teal]++)[/teal]
    [b]if[/b] [teal]([/teal]form[teal].[/teal]elements[teal][[/teal]name[teal]][[/teal]i[teal]].[/teal]checked[teal])[/teal]
      checked [teal]=[/teal] [b]true[/b][teal];[/teal]

  [COLOR=darkgoldenrod]geterrorcontainer[/color][teal]([/teal]form[teal].[/teal]elements[teal][[/teal]name[teal]][[/teal][purple]0[/purple][teal]]).[/teal]innerHTML [teal]=[/teal] checked [teal]?[/teal] [green][i]''[/i][/green] [teal]:[/teal] [green][i]'Must check one'[/i][/green][teal];[/teal]
  [b]if[/b] [teal](![/teal]checked[teal])[/teal] form[teal].[/teal]elements[teal][[/teal]name[teal]][[/teal][purple]0[/purple][teal]].[/teal][COLOR=darkgoldenrod]focus[/color][teal]();[/teal]

  [b]return[/b] checked[teal];[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]checkform[/color][teal]([/teal]form[teal])[/teal]
[teal]{[/teal]
  [b]return[/b] [teal]([/teal]
    [COLOR=darkgoldenrod]checkradio[/color][teal]([/teal]form[teal],[/teal][green][i]'element_11'[/i][/green][teal])[/teal]
    [teal]&[/teal] [COLOR=darkgoldenrod]notEmpty[/color][teal]([/teal]form[teal].[/teal]elements[teal][[/teal][green][i]'element_13'[/i][/green][teal]])[/teal]
    [teal]&[/teal] [COLOR=darkgoldenrod]notEmpty[/color][teal]([/teal]form[teal].[/teal]element_12[teal])[/teal]
  [teal])[/teal] [teal]!=[/teal] [purple]0[/purple][teal];[/teal]
[teal]}[/teal]
Note that
[ul]
[li]Each validator function call will set the focus, so checkform() calls them in reverse order so at the end the focus remains on the first invalid [tt]input[/tt].[/li]
[li][tt]&&[/tt] short circuits the evaluation so only one invalid [tt]input[/tt] would have its error message displayed.[/li]
[li][tt]&[/tt] does not short circuit, but is arithmetic operator, so its result has to be transformed into boolean.[/li]
[/ul]
Code: 
   [b]<form[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"form_453570"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"appnitro"[/i][/green]  [maroon]method[/maroon][teal]=[/teal][green][i]"post"[/i][/green] [maroon]action[/maroon][teal]=[/teal][green][i]"insertform.php"[/i][/green] [maroon]onsubmit[/maroon][teal]=[/teal][green][i]"return checkform(this)"[/i][/green][b]>[/b]

[gray]<!-- ... -->[/gray]

    [b]<div>[/b]
      [b]<input[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"element_11_1"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"element_11"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"element radio"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"radio"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"1"[/i][/green] [b]/>[/b]
      [b]<label[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"choice"[/i][/green] [maroon]for[/maroon][teal]=[/teal][green][i]"element_11_1"[/i][/green][b]>[/b]Male[b]</label>[/b]
      [b]<input[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"element_11_2"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"element_11"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"element radio"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"radio"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"2"[/i][/green] [b]/>[/b]
      [b]<label[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"choice"[/i][/green] [maroon]for[/maroon][teal]=[/teal][green][i]"element_11_2"[/i][/green][b]>[/b]Female[b]</label>[/b]
      [b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"errorcontainer"[/i][/green][b]></div>[/b]
    [b]</div>[/b]

If this validation Odyssey goes longer, would be better to search the web for a dedicated validator script. Preferably a HTML5 [tt]input[/tt] attribute-based one, so if the browser is able to validate itself, to let be do it.

Feherke.
[link feherke.github.com/][/url]
 
Upvote 0 Downvote
Hi Feherke...!
Finally I gave up and came with a very simple way to validate my form. When submit button is clicked at that time validation will start. But it Immediately goes to insertform.php after displaying the error message, you know this should not happen. It should stop...! Here is the code registration.js
Code: 
function formValidation()
{
   var fn = document.registration.element_12;
   var ln = document.registration.element_13;
   var sx = document.registration.element_11;
   var em = document.registration.element_5;
   if(fname_validation(fn,5)){
     if(lname_validation(ln,5)){
       if(validsex(sx)){
         if(ValidateEmail(em)){
         }
       }
     }
   }
   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();
       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 false;
   }
   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();
	   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 false;
   }
   return true;
}
function validsex(sx){
  if(sx[0].checked != true || sx[1].checked != true){
      document.getElementById('sxRadio').innerHTML = "Select your Sex";
      sx.focus();
      return false;
  }
}
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";
	return false;
    }
}
HTML: 
This is form.php code-
[COLOR=red]<script src="registration.js"></script>[/color]<ul>
[COLOR=red]<form id="form_453570" class="appnitro"  name="registration"  method="post" action="insertform.php" onSubmit="formValidation();">[/color]<li id="li_12" >
<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=""/>
[COLOR=red]<div id="fnTextBox"></div>[/color]</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=""/> 
[COLOR=red]<div id="lnTextBox"></div>[/color]</div> 
 </li>
<li id="li_11" >
<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> 
[COLOR=red]<div id="sxRadio"></div>[/color]</li>
<li class="buttons">
	<input type="hidden" name="form_id" value="453570" />
	<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
	</li>
  </form>

I request you please solve this issue.
 
Upvote 0 Downvote
Hi

Just compare the [tt]form[/tt] tags :
Code: 
[gray]<!-- my -->[/gray]
[b]<form[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"form_453570"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"appnitro"[/i][/green]  [maroon]method[/maroon][teal]=[/teal][green][i]"post"[/i][/green] [maroon]action[/maroon][teal]=[/teal][green][i]"insertform.php"[/i][/green] [maroon]onsubmit[/maroon][teal]=[/teal][green][i]"[highlight]return[/highlight] checkform(this)"[/i][/green][b]>[/b]

[gray]<!-- your -->[/gray]
[b]<form[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"form_453570"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"appnitro"[/i][/green]  [maroon]name[/maroon][teal]=[/teal][green][i]"registration"[/i][/green]  [maroon]method[/maroon][teal]=[/teal][green][i]"post"[/i][/green] [maroon]action[/maroon][teal]=[/teal][green][i]"insertform.php"[/i][/green] [maroon]onSubmit[/maroon][teal]=[/teal][green][i]"formValidation();"[/i][/green][b]>[/b]

Feherke.
[link feherke.github.com/][/url]
 
Upvote 0 Downvote
Thankyou you mean to say modified version of my code -

<form id="form_453570" class="appnitro" method="post" action="insertform.php" onsubmit="return formValidation(this)">
 
Upvote 0 Downvote
Yes Yes it working But for Sex again moving on next page
 
Upvote 0 Downvote
Hi

Correct. Without the [tt]return[/tt] keyword the value calculated in the event handler is not passed forward to the emitter.

The JavaScript equivalents of setting the event handler would look like this :
JavaScript: 
[gray]// your earlier code - return value : undefined[/gray]
document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'form_453570'[/i][/green][teal]).[/teal]onsubmit[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal] [COLOR=darkgoldenrod]formValidation[/color][teal]([/teal][b]this[/b][teal])[/teal] [teal]}[/teal]

[gray]// your latest code - return value : whatever formValidation() returns[/gray]
document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'form_453570'[/i][/green][teal]).[/teal]onsubmit[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal] [b][highlight]return[/highlight][/b] [COLOR=darkgoldenrod]formValidation[/color][teal]([/teal][b]this[/b][teal])[/teal] [teal]}[/teal]

Regarding the Sex validation, it passes because the JavaScript code throws a runtime error, so fails to the [tt]return[/tt] the [tt]false[/tt] value which would stop the submitting. The error is caused by the attempt to call the [tt]focus()[/tt] method of the sx [tt]NodeList[/tt]. Which does not exist. Change it to [tt]sx[teal][[/teal][purple]0[/purple][teal]].[/teal]focus[teal]();[/teal][/tt].

But your Sex validation condition says "if either male of female is unchecked, then scream". While is impossible to have both checked, the validation will always fail. Change it to [tt]if[teal](!([/teal]sx[teal][[/teal][purple]0[/purple][teal]].[/teal]checked [teal]||[/teal] sx[teal][[/teal][purple]1[/purple][teal]].[/teal]checked[teal]))[/teal][teal]{[/teal][/tt].


Feherke.
[link feherke.github.com/][/url]
 
Upvote 0 Downvote
oooooofff.... at last done[glasses].
What is problem in ths code?
Code: 
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";
      return false;
   }
}
<li id="li_5" >
<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>
</li>
It is again not checking the every thing is same as of first name and last name then why it is giving me pain?[evil]
 
Upvote 0 Downvote
Okay Okay its Okay done..

I mention the nesting of this code
if(fname_validation(fn,5))
{
if(lname_validation(ln,5))
{
if(ValidateEmail(em))
{
if(validsex(sx))
{

}
}
}
}

with the sequence of the HTML element. Thank you Thank you Thank you Feherke[wink]
 
Upvote 0 Downvote
Why Form is not not clearing the error if I enter the data after getting the error once. Let me explain -
Suppose I didn't fill up the email box,for which I got the error message and focus goes back to email text box. After that I fill it up properly and clicked on Submit button, but still it is showing the email error message not moving on next page.
Why So?
 
Upvote 0 Downvote
Hi

vishalonne said:
still it is showing the email error message not moving on next page.
Click to expand...
There are two separate things :
[ul]
[li]The error message does not disappear because nothing removes it. The cleanest way is to remove the message at the beginning of the function :
JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]ValidateEmail[/color][teal]([/teal]em[teal])[/teal][teal]{[/teal]
  [highlight]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'emTextBox'[/i][/green][teal]).[/teal]innerHTML [teal]=[/teal] [green][i]''[/i][/green][teal];[/teal][/highlight]
  [b]var[/b] mailformat [teal]=[/teal] [fuchsia]/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/[/fuchsia][teal];[/teal]
  [b]if[/b][teal]([/teal]em[teal].[/teal]value[teal].[/teal][COLOR=darkgoldenrod]match[/color][teal]([/teal]mailformat[teal]))[/teal][teal]{[/teal]
    [b]return[/b] [b]true[/b][teal];[/teal]
  [teal]}[/teal]
  [b]else[/b][teal]{[/teal]
    document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'emTextBox'[/i][/green][teal]).[/teal]innerHTML [teal]=[/teal] [green][i]"Enter valid EMail ID"[/i][/green][teal];[/teal]
    [b]return[/b] [b]false[/b][teal];[/teal]
  [teal]}[/teal]
[teal]}[/teal]
[/li]
[li]The [tt]form[/tt] is never submitted because the formValidation() function always [tt]return[/tt]s [tt]false[/tt] unconditionally. Just [tt]return[/tt] [tt]true[/tt] when all validation passed :
JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]formValidation[/color][teal]()[/teal]
[teal]{[/teal]
  [b]var[/b] fn [teal]=[/teal] document[teal].[/teal]registration[teal].[/teal]element_12[teal];[/teal]
  [b]var[/b] ln [teal]=[/teal] document[teal].[/teal]registration[teal].[/teal]element_13[teal];[/teal]
  [b]var[/b] sx [teal]=[/teal] document[teal].[/teal]registration[teal].[/teal]element_11[teal];[/teal]
  [b]var[/b] em [teal]=[/teal] document[teal].[/teal]registration[teal].[/teal]element_5[teal];[/teal]
  [b]if[/b][teal]([/teal][COLOR=darkgoldenrod]fname_validation[/color][teal]([/teal]fn[teal],[/teal][purple]5[/purple][teal]))[/teal][teal]{[/teal]
    [b]if[/b][teal]([/teal][COLOR=darkgoldenrod]lname_validation[/color][teal]([/teal]ln[teal],[/teal][purple]5[/purple][teal]))[/teal][teal]{[/teal]
      [b]if[/b][teal]([/teal][COLOR=darkgoldenrod]validsex[/color][teal]([/teal]sx[teal]))[/teal][teal]{[/teal]
        [b]if[/b][teal]([/teal][COLOR=darkgoldenrod]ValidateEmail[/color][teal]([/teal]em[teal]))[/teal][teal]{[/teal]
          [highlight][b]return[/b] [b]true[/b][teal];[/teal][/highlight]
        [teal]}[/teal]
      [teal]}[/teal]
    [teal]}[/teal]
  [teal]}[/teal]
  [b]return[/b] [b]false[/b][teal];[/teal]
[teal]}[/teal]
[/li]
[/ul]
This will still not work as there is something logically wrong in your functions. Usually is considered a bad idea to [tt]return[/tt] on an [tt]if[/tt]'s both branches. Certainly having 2 [tt]if[/tt]s and 4 [tt]return[/tt]s in a function ( talking about lname_validation() ) does not help understanding and/or debugging it.


Feherke.
[link feherke.github.com/][/url]
 
Upvote 0 Downvote
Can we use any sort of oblur event for clearing the message? I already used the second menthod in my code.
 
Upvote 0 Downvote
And most important... how can validate 11 check box with current code?
 
Upvote 0 Downvote
I am planning to do something like this, is this okay...
Code: 
function validFeatures(f1,f2,f3,f4,f5,f6,f7,f8,f9,f10,f11)
{
	x=0;
	if(f1.checked) || f2.checked || f3.checked) || f4.checked || f5.checked) || f6.checked || f7.checked) || f8.checked || f9.checked) || f10.checked || f11.checked)
	{
		x++;
	}
	if (x==1)
	{
		return true;
	}
	if(x==0)
	{
		document.getElementById('feCheck').innerHTML = "Select atleast 1 feature";
		f1.focus();
		return false;
	}
}
 
Upvote 0 Downvote
Hi

vishalonne said:
What do you suggest?
Click to expand...
Well, I shown my suggested way earlier. And nothing seems to left from it.

Also gave a suggestion for further development : use HTML5 with a script which adds validation for older browsers. For example h5Validate. ( Not used it myself. Mentioned it just as an example. )

vishalonne said:
Can we use any sort of oblur event for clearing the message?
Click to expand...
Yes. Uncomfortable to code it as you will have to mention all those [tt]id[/tt]s in yet another place. I shown my suggested way to avoid using so many [tt]id[/tt]s and simplify the code earlier. And nothing seems to left from it.

vishalonne said:
And most important... how can validate 11 check box with current code?
Click to expand...
With the current code hardly. But could be easily solved with the checkradio() I posted earlier. And nothing seems to left from it.

vishalonne said:
I am planning to do something like this, is this okay...
Click to expand...
Ugly and hard to maintain, but would work if your closing parenthesis ( ) ) in the [tt]if[/tt] condition would match up.


Feherke.
[link feherke.github.com/][/url]
 
Upvote 0 Downvote
Thanks Feherke.. really I am thankful to you... but really I am not aware of HTML5 can you suggest me some some online resource or site where I can find material to learn and develop
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
498
MDGarcia
MDGarcia
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
281
rogerte
rogerte
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
716
Mike Lewis
Mike Lewis
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
313
lexer
lexer
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
288
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top