Advertisement

07.04.2008 at 09:10AM PDT, ID: 23539687
[x]
Attachment Details

Form Validation (JS Clientside) On Multiple Input Form

Asked by thyros in JavaScript, Hypertext Markup Language (HTML), Extensible HTML (XHTML)

Hi,

I have a form which needs some form validation process in place to prevent the form from being submitted without the required fields.

Preferably there are no pop-ups or page refreshes, just a simple bold red "* Required" to show up next to the  required fields which have not been filled in.

I have seen basic examples online, but I need the help of an expert in the field because our form has a Select box, which depending upon the option you select, it will display either 1 or 2 form inputs in three different possible variations.

To better understand it, here is the function of the form;  a user comes to our website, and wishes to compare prices on Gas and/or Electricity suppliers.  User enters their postcode (name="p") which is always required.  

Then in step 2, they have a select box.  By default the select box is showing 'Gas & Electricity' (option value="dual")

Underneath there are two text input boxes, one says 'enter the amount you spent on Gas last year'  (name="values[gasBill]")  and another one says 'enter the amount you spent on Electricity last year' (name="values[elecBill]").

If (option value="dual") is selected, both (name="values[gasBill]") and (name="values[elecBill]") is required.

However, if the select box is showing 'Electricity Only' (option value="electric") then only (name="values[elecBill]") is required, the other gas input is hidden.

If the select box is showing 'Gas Only' (option value="gas") then only (name="values[gasBill]")  is required, the other electric input becomes hidden.


So to summarize, there are 3 different possible states.. by default 'dual' is selected in the select box, thus two text input boxes are shown below, and both these are required.  If only 'electric' is selected in select box, only the text input for 'electricity' is shown and is required. If only 'gas' is selected in select box, only the text input for 'gas' is shown and is required.  

I would really appreciate if someone could take a shot at implementing some form validation in the manner described above.  I think the main issue hangs on some kind of javascript to check the select box value, and based on that make either 'gas' or 'electricity' or 'gas + electricity' as required fields.  (Postcode is always required, and email is optional).

Thanks for your time.
Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<title>Form Validation Test</title>
</head>
<body>
 
 
<form action="http://www.example.com/form-index.html" method="post" id="choosecalculator" name="choosecalculator">
 
    <input type="hidden" name="submit" value="1" />
    <input type="hidden" name="referId" value="" />
 
 
<div id="ed-postcodebox">
 
<table class="ed-postcodetable" cellpadding="0" cellspacing="0">
<tr>
<td><div class="stepformlabel">Step 1.</div></td>
 
<td align="right"><div class="ed-postcodeformlabel"><label for="ed-postcode">Postcode</label></div></td>
 
<td align="left">
 
<input id="ed-postcode" name="p" type="text" value="" maxlength="9" />
</td>
</tr></table>
 
 
<script type="text/javascript">
document.getElementById('ed-postcode').focus();
</script>
<!-- #ed-postcodebox--></div>
 
 
 
 
<div class="REboxgreyLight" id="ed-formstep2box">
<span class="rgreyLline1"></span>
<span class="rgreyLline2"></span>
<span class="rgreyLline3"></span>
<span class="rgreyLline4"></span>
<div class="REboxgreyLightContent">
	<!--  FCE-->
 
 
<div id="ed-step2box">
<table class="ed-step2table" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="ed-step2" class="stepformlabel">Step 2.</div>
</td>
<td style="width:100%;">
<!-- Compare Quote Type Prices Table -->
<table class="ed-step2quotetypetable" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="ed-compareformlabel"><label for="ed-fueltype">Compare</label></div>
</td>
 
<td>
<select id="ed-fueltype" onchange="showContainers(this.value);" name="db"><option value="dual" >Gas &amp; Electricity</option><option value="electric" >Electricity only</option><option value="gas" >Gas only</option></select>
</td>
 
<td>
<div class="ed-pricesformlabel"><label for="ed-fueltype">Prices</label></div>
</td>
</tr>
</table>
 
<script type="text/javascript">
<!--
function DualTypeControl(state) {
  if (state == "enable") {
    document.getElementById("single").disabled = false;               
    document.getElementById("single").checked  = true;               
    document.getElementById("separate").disabled = false;               
  } else {
    document.getElementById("single").disabled = true;               
    document.getElementById("single").checked  = true;               
    document.getElementById("separate").disabled = true;               
  }
}
//-->
</script>
 
<script type="text/javascript">
function showContainers(fuel) {
  switch (fuel) {
  case 'dual': document.getElementById('ed-electricrow').style.display='block'; document.getElementById('ed-gasrow').style.display='block'; break;
  case 'electric': document.getElementById('ed-electricrow').style.display='block'; document.getElementById('ed-gasrow').style.display='none'; break;
  case 'gas': document.getElementById('ed-electricrow').style.display='none'; document.getElementById('ed-gasrow').style.display='block'; break;
  default: document.getElementById('ed-electricrow').style.display='none'; document.getElementById('ed-gasrow').style.display='none'; break;
  }
}
 
setTimeout("showContainers(document.getElementById('ed-fueltype').value);",100);
</script>
 
<!-- # Compare Quote Type Prices Table [END] -->
 
</td>
</tr>
<tr>
<td><!-- # --></td>
<td>
<div class="ed-step2lightbox">
 
<div id="ed-gasrow">
<div class="ed-billquestionlabel">
<label for="gasbillvalue">What is your annual gas bill to the nearest pound?</label> 
</div>
 
<table class="ed-step2priceinputtable" cellpadding="0" cellspacing="0">
<tr>
<td><div class="ed-poundsign"><label for="gasbillvalue">&#163;</label></div></td>
<td><input id="gasbillvalue" name="values[gasBill]" value="" size="5" maxlength="4" /></td>
<td><div class="ed-energyicon"><center><label for="gasbillvalue"><img src="/fileadmin/img/icons/gas-fire.gif" alt="Gas" title="Based on how much you spend each year on gas, we will find the best tariff and supplier." /></label></center></div></td>
</tr>
</table>
<!-- #ed-gasrow --></div>
 
 
<div id="ed-electricrow">
<div class="ed-billquestionlabel">
<label for="electricitybillvalue">What is your annual electricity bill to the nearest pound?</label>
</div>
 
<table class="ed-step2priceinputtable" cellpadding="0" cellspacing="0">
<tr>
<td><div class="ed-poundsign"><label for="electricitybillvalue">&#163;</label></div></td>
<td><input id="electricitybillvalue" name="values[elecBill]" value="" size="5" maxlength="4" /></td>
<td><div class="ed-energyicon"><center><label for="electricitybillvalue"><img src="/fileadmin/img/icons/lightbulb-on.gif" alt="Electricity" title="Based on how much you spend each year on electricity, we will find the best tariff and supplier." /></label></center></div></td>
</tr>
</table>
<!-- #ed-electricrow --></div>
 
<!-- .ed-step2lightbox --></div>
</td>
</tr>
 
 
</table>
 
 
<!-- #ed-step2box --></div>
 
 
	<!--  FCE-->
</div>
<span class="rgreyLline4"></span>
<span class="rgreyLline3"></span>
<span class="rgreyLline2"></span>
<span class="rgreyLline1"></span>
</div>
 
 
<div id="ed-step3box">
 
 
<table class="ed-step3table" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="stepformlabel">Step 3.</div>
</td>
 
<td style="width:100%;">
<!-- email form table -->
<table class="ed-step3emailformtable" cellpadding="0" cellspacing="0"><tr><td>
<div class="ed-emailformlabel"><label for="ed-email">Email</label></div></td><td>
<input id="ed-email" class="ed-email" type="text" />
</td></tr></table>
<!-- email form table [end] -->
</td>
 
<td>
<input value="annualBill_gas annualBill_electricity postCode" name="argList" type="hidden"> 
<input value="jump:WelcomePage:QuickQuote2" name="cmd" type="hidden"> 
<input id="getyourquote" name="image" value="search" src="/fileadmin/img/button/compare-now.gif" alt="Compare Prices" title="Click Here To Get Your Savings Quote &gt;&gt;" type="image">
</td>
</tr>
</table>
 
<!-- #ed-step3box --></div>
 
		
<div id="ed-emailinfotipcontainer">
<ul class="itip">
<li>
Email address is optional and only used to send you a quote, ..or you can easily
register for price updates if you decide not to proceed today.
</li>
</ul>
 
</div>
	
 
  </form>  
 
 
 
</body>
</html>
Attachments:
 
form-validation-test.txt (6 KB) (File Type Details) 
The html code for the Form we want to implement form validation upon, just rename to .html
 
 
Keywords: Form Validation (JS Clientside) On M…
Title
1 Grass Trimmers - Gas or Electric
2 Do you think gas is expensive?
3 If bold then...
4 Gas Prices
5 Gas Prices
6 Hiding / Showing DIV's Through SEL…
 
Loading Advertisement...
 
[+][-]07.04.2008 at 12:27PM PDT, ID: 21934522

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]07.04.2008 at 01:51PM PDT, ID: 21934838

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]07.04.2008 at 02:56PM PDT, ID: 21935063

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]07.05.2008 at 05:22AM PDT, ID: 21936747

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]07.05.2008 at 01:53PM PDT, ID: 21938352

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: JavaScript, Hypertext Markup Language (HTML), Extensible HTML (XHTML)
Sign Up Now!
Solution Provided By: mr_egyptian
Participating Experts: 1
Solution Grade: A
 
 
[+][-]07.05.2008 at 06:08PM PDT, ID: 21938958

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628