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
register.js
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;
}