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!

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

All Error at once on top of Web Page

Status
Not open for further replies.

vishalonne

Technical User
Jul 29, 2012
49
Hi

I have done with code and its fine. I just wan to display all the error at once in one place at top of page when user completed form and submits the form -
Here is the partial code of form.php
HTML:
<!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" />
[COLOR=red]<script  type="text/javascript" src="registration.js"></script>[/color]</head>
<body id="main_body" >
<img id="top" src="top.png" alt="">
<div id="form_container">
 [COLOR=red]<form id="form_453570" class="appnitro"  name="registration"  method="post" action="insertform.php" onSubmit="return formValidation(this)">[/color] <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=""/>
        [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_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=""/> 
			[COLOR=red]<div id="emTextBox"></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 id="li_1" >
		<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=""/> 
		[COLOR=red]<div id="snTextBox"></div>[/color]        </div> 
	 </li>
     <li id="li_2" >
		<label class="description" for="element_2">City <font color="#EC0006">*</font></label>
		<div> <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/>
        [COLOR=red]<div id="ciTextBox"></div>[/color] 		</div> 
     </li>
    
        <li id="li_6" >
		<label class="description" for="element_6">Class <font color="#EC0006">*</font></label>
		<span>
			<input id="element_6_1" name="element_6" class="element radio" type="radio" value="1" />
			<label class="choice" for="element_6_1">XI</label>
			<input id="element_6_2" name="element_6" class="element radio" type="radio" value="2" />
			<label class="choice" for="element_6_2">XII</label>
		</span>
        <div id="clRadio"></div> 
		</li>
        <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> 
        <div id="smRadio"></div>
		</li>
        <li id="li_7" >
		<label class="description" for="element_7">Computer Subject <font color="#EC0006">*</font></label>
		<span>
			<input id="element_7_1" name="element_7" class="element radio" type="radio" value="1" />
			<label class="choice" for="element_7_1">Informatics Practices</label>
			<input id="element_7_2" name="element_7" class="element radio" type="radio" value="2" />
			<label class="choice" for="element_7_2">Computer Science</label>
			<input id="element_7_3" name="element_7" class="element radio" type="radio" value="3" />
			<label class="choice" for="element_7_3">Web Designing</label>
		</span> 
        <div id="csRadio"></div>
		</li>		
        <li id="li_9" >
		<label class="descriptionbig" for="element_9">Do you think a web site catering maximum information regarding computer related subjects in CBSE is required? So students don’t have to search for information in different web sites. <font color="#EC0006">*</font></label>
		<span>
			<input id="element_9_1" name="element_9" class="element radio" type="radio" value="1" />
			<label class="choice" for="element_9_1">Yes</label>
			<input id="element_9_2" name="element_9" class="element radio" type="radio" value="2" />
			<label class="choice" for="element_9_2">No</label>
		</span> 
        <div id="reRadio"></div>
		</li>		<li id="li_10" >
		<label class="descriptionbig" for="element_10">Such type of web site should should have following features <font color="#EC0006">*</font></label>
		<span>
			<input id="element_10_1" name="feature[]" class="element checkbox" type="checkbox" value="1" />
			<label class="choice" for="element_10_1">5 years question paper (Solved)</label>
			<input id="element_10_2" name="feature[]" class="element checkbox" type="checkbox" value="2" />
			<label class="choice" for="element_10_2">5 years question paper (Unsolved)</label>
			<input id="element_10_3" name="feature[]" class="element checkbox" type="checkbox" value="3" />
			<label class="choice" for="element_10_3">Sample Questions (approx. 500)</label>
			<input id="element_10_4" name="feature[]" class="element checkbox" type="checkbox" value="4" />
			<label class="choice" for="element_10_4">Ask their problem via email</label>
			<input id="element_10_5" name="feature[]" class="element checkbox" type="checkbox" value="5" />
			<label class="choice" for="element_10_5">Online help 24 x 7</label>
			<input id="element_10_6" name="feature[]" class="element checkbox" type="checkbox" value="6" />
			<label class="choice" for="element_10_6">Sample projects</label>
			<input id="element_10_7" name="feature[]" class="element checkbox" type="checkbox" value="7" />
			<label class="choice" for="element_10_7">Sample of codes</label>
            <input id="element_10_8" name="feature[]" class="element checkbox" type="checkbox" value="8" />
			<label class="choice" for="element_10_8">Sample presentations</label>
			<input id="element_10_9" name="feature[]" class="element checkbox" type="checkbox" value="9" />
			<label class="choice" for="element_10_9">Free Softwares</label>
			<input id="element_10_10" name="feature[]" class="element checkbox" type="checkbox" value="10" />
			<label class="choice" for="element_10_10">Students can share their work with others</label>
			<input id="element_10_11" name="feature[]" class="element checkbox" type="checkbox" value="11" />
			<label class="choice" for="element_10_11">Latest updates regarding IT</label>
		</span> 
		<div id="feCheck"></div>
		</li>
        <li id="li_14" >
		<label class="descriptionbig" for="element_14">What will be your visiting rate in a web site (if features you mentioned are available in that web site) <font color="#EC0006">*</font> </label>

		<span>
			<input id="element_14_1" name="element_14" class="element radio" type="radio" value="1" />
			<label class="choice" for="element_14_1">Frequently</label>
			<input id="element_14_2" name="element_14" class="element radio" type="radio" value="2" />
			<label class="choice" for="element_14_2">Periodically</label>
			<input id="element_14_3" name="element_14" class="element radio" type="radio" value="3" />
			<label class="choice" for="element_14_3">Rare</label>
		</span> 
        <div id="frRadio"></div>
		</li>
        <li id="li_4" >
		<label class="description" for="element_4">Comment </label>
		<div>
			<textarea id="element_4" name="element_4" class="element textarea medium"></textarea> 
		</div> 
		</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>
	</ul>
  </form>	

             <div id="footer"></div>

	</div>

	<img id="bottom" src="bottom.png" alt="">

	</body>

</html>

register.js
Code:
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;
   var ci = document.registration.element_2;
   var em = document.registration.element_5;
   var cl = document.registration.element_6;
   var sm = document.registration.element_8;
   var cs = document.registration.element_7;
   var re = document.registration.element_9;
   var fe1 = document.registration.element_10_1;
   var fe2 = document.registration.element_10_2;
   var fe3 = document.registration.element_10_3;
   var fe4 = document.registration.element_10_4;
   var fe5 = document.registration.element_10_5;
   var fe6 = document.registration.element_10_6;
   var fe7 = document.registration.element_10_7;
   var fe8 = document.registration.element_10_8;
   var fe9 = document.registration.element_10_9;
   var fe10 = document.registration.element_10_10;
   var fe11 = document.registration.element_10_11;
   var fr = document.registration.element_14;

   if(fname_validation(fn,3))
   {
     if(lname_validation(ln,3))
     {
       if(ValidateEmail(em))
       {
         if(validsex(sx))
         { 
           if(validSchoolName(sn))
	   {
	     if(validCityName(ci,3))
	     {
	       if(validClass(cl))
	       {
	         if(validStream(sm))
		{
		   if(validComputerSubject(cs))
		   {
		      if(validRequired(re))
		      {
			if(validFeatures(fe1,fe2,fe3,fe4,fe5,fe6,fe7,fe8,fe9,fe10,fe11))
			{
			  if(validFrequency(fr))
			  {
			      return true;
			  }
			}
		       }
		     }
		   }
		 }
	        }
	      }
             }
          }
       }
   }
   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 clearMess(elem)
{
	alert (elem);
	document.getElementById('elem').innerHTML = "";
	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;
}

function validCityName(ci,mx)
{
   var letters = /^[A-Za-z]+$/;
   var ci_len = ci.value.length;
   if (ci_len == 0 || ci_len < mx)
   {
       document.getElementById('ciTextBox').innerHTML = "Enter City name/ Minimum length is 3 characters ";
	   ci.focus();
	   return false;
   }
   if(ci.value.match(letters))
   {
	   return true;
   }
   else
   {
	   document.getElementById('ciTextBox').innerHTML = "Name must not have other than alphabet";
	   ci.focus();
	   return false; //alert("User Id should not be empty / length be between "+mx+" to "+my);
   }
   return true;
}
function validClass(cl)
{
	if(!(cl[0].checked || cl[1].checked))
	{
		document.getElementById('clRadio').innerHTML = "Select your Class";
		cl[0].focus();
		return false;
	}
	return true;
}
function validStream(sm)
{
	if(!(sm[0].checked || sm[1].checked || sm[2].checked))
	{
		document.getElementById('smRadio').innerHTML = "Select your Stream";
		sm[0].focus();
		return false;
	}
	return true;
}
function validComputerSubject(cs)
{
	if(!(cs[0].checked || cs[1].checked || cs[2].checked))
	{
		document.getElementById('csRadio').innerHTML = "Select your Computer Subject";
		cs[0].focus();
		return false;
	}
	return true;
}
function validRequired(re)
{
	if(!(re[0].checked || re[1].checked))
	{
		document.getElementById('reRadio').innerHTML = "Select Your required ot not";
		re[0].focus();
		return false;
	}
	return true;
}

function validFeatures(fe1,fe2,fe3,fe4,fe5,fe6,fe7,fe8,fe9,fe10,fe11)
{
	x=0;
	if(fe1.checked || fe2.checked || fe3.checked || fe4.checked || fe5.checked || fe6.checked || fe7.checked || fe8.checked || fe9.checked || fe10.checked || fe11.checked)
	{
		x++;
	}
	if (x==1)
	{
		return true;
	}
	if(x==0)
	{
		document.getElementById('feCheck').innerHTML = "Select atleast 1 feature";
		fe1.focus();
		return false;
	}
}
function validFrequency(fr)
{
	if(!(fr[0].checked || fr[1].checked || fr[2].checked))
	{
		document.getElementById('frRadio').innerHTML = "Select Your visiting rate";
		fr[0].focus();
		return false;
	}
	return true;
}
 



If you are using Firefox or Chrome you can ignore the Google malware warning, yes I had a javascript code injection attack that was there for about three days over two months ago and was cleaned up. But it seems that Google are very quick in applying the warnings but are glacially slow when removing them.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top