Advertisement

02.12.2008 at 06:24AM PST, ID: 23156152
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
9.4

Form Validation

Asked by Platini in JavaScript

Tags: ,

I used the code from this example http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_21457377.html?sfQueryTermInfo=1+entir+form+valid

The problem I have is that when I use this code  in my form I am unable to focus to radio buttons after error or button is not selected. Also, for some reason, After textarea is filed and I press submit the form resets eventhough all other radio buttons are not selected. Could anyone tell me what is wrong here?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:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:
434:
435:
436:
437:
438:
439:
440:
441:
442:
443:
444:
445:
446:
447:
448:
449:
450:
451:
452:
453:
454:
455:
456:
457:
458:
459:
460:
461:
462:
463:
464:
465:
466:
467:
468:
469:
470:
471:
472:
473:
474:
475:
476:
477:
478:
479:
480:
481:
482:
483:
484:
485:
486:
487:
488:
489:
490:
491:
492:
493:
494:
495:
496:
497:
498:
499:
500:
501:
502:
503:
504:
505:
506:
507:
508:
509:
510:
511:
512:
513:
514:
515:
516:
517:
518:
519:
520:
521:
522:
523:
524:
525:
526:
527:
528:

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 
<head>
 
 
 
<title>Untitled Document</title>
 
 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
 
<style type="text/css">
 
<!--
 
.style2 {
	font: 12px;
	font-size: small;
	font-family: Verdana;
}
 
.style3 {font-family: Verdana, Arial, Helvetica, sans-serif}
 
th
	{ color: #000000; font-family: Tahoma, Verdana; font-size: 11px; }
.newStyle1 {
	font-family: Verdana;
	font-size: 12px;
	background-color: #CCE6FF;
}
.newStyle2 {
	color: #D9ECFF;
	background-color: #FFFFFF;
}
 
-->
 
</style>
 
 
 
<script type="text/javascript">
<!--
/*********************************************************************
                         Original Script By
               Patrick Fairfield (a.k.a fritz_the_blank)
                         Fairfield Consulting
     ========================================================
                         Edited by Jay Solomon
                    jaysolomon *AT* pclnet *DOT* net
*********************************************************************/
var strAlertMsg = ""
var focusField = ""
//============================================================
//validate Date
function isDate(theForm,strFieldName,strMsg){
    var objFormField = theForm.elements[strFieldName];
    strDate = objFormField.value;
    if(strDate.length>0){
            var dateregex=/^[ ]*[0]?(\d{1,2})\/(\d{1,2})\/(\d{4,})[ ]*$/;
             var match=strDate.match(dateregex);
             if (match){
                       var tmpdate=new Date(match[3],parseInt(match[1],10)-1,match[2]);
                  if (tmpdate.getDate()==parseInt(match[2],10) && tmpdate.getFullYear()==parseInt(match[3],10) && (tmpdate.getMonth()+1)==parseInt(match[1],10)){
                    return true;
                    }
             }
                    strAlertMsg += "- "+ strMsg +" is Required.\nExample: 01/01/2003\n";
               if(!focusField) focusField =""+ strFieldName +"";
         return false;
    }
    else{
          return true;
    }
}
//========================================================================
//Validate Us Phone. Ex. (999) 999-9999 or (999)999-9999
function isPhone(theForm,strFieldName,strMsg)     {
     var objFormField = theForm.elements[strFieldName];
     var strValue = objFormField.value;
     var objRegExp  = /^\([1-9]\d{2}\)\s?\d{3}\-\d{4}$/;
      if(!objRegExp.test(strValue)){
          strAlertMsg += "- "+ strMsg +" is Required.\n    Example:\n(999)999-9999 or (999) 999-9999\n";
     if(!focusField) focusField=""+ strFieldName +"";
          return false;
          }
     return true;
}
//========================================================================
//Validate US zip code in 5 digit format or zip+4 format. 99999 or 99999-9999
function isZipCode(theForm,strFieldName,strMsg)     {
     var objFormField = theForm.elements[strFieldName];
     var strValue = objFormField.value;
     var objRegExp  = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
     if(!objRegExp.test(strValue)){
          strAlertMsg += "- "+ strMsg +" is Required.\n";
     if(!focusField) focusField =""+ strFieldName +"";
          return false;
          }
     return true;
}
//==========================================================================
//Validate the Select
function hasSelection(theForm,strFieldName,strMsg)     {
     var objFormField = theForm.elements[strFieldName];
     if(objFormField.selectedIndex ==0)     {
          strAlertMsg += "- "+ strMsg +" is Required.\n";
           return false;
           }
     return true;
}
//========================================================================
//Validate Check Box
function isChecked(theForm,strFieldName,strMsg) {
     var objFormField= theForm.elements[strFieldName];
     var strValue= objFormField.checked;
     if (!strValue) {
          //alert("The \""+ strMsg +"\" box is checked!")
          //} else {
          strAlertMsg += "- "+ strMsg +" is Required.\n";
     if(!focusField) focusField =""+ strFieldName +"";
          return false;
          }
     return true;
}
//========================================================================
//Validate Text Box
function isEmpty(theForm,strFieldName,strMsg){
     var objFormField = theForm.elements[strFieldName];
     var strValue = objFormField.value;
     strValue = strValue.split(" ").join("")
     if(strValue.length<1){
          strAlertMsg += "- "+ strMsg +" is Required.\n";
     if(!focusField) focusField =""+ strFieldName +"";
          return false;
          }
     return true;
}
//========================================================================
//Validate Email
function isEmail(theForm,strFieldName,strMsg){
     var objFormField = theForm.elements[strFieldName]
     var strEmail = objFormField.value;
     var bolValid = true;
          if(strEmail.length < 7){
          bolValid = false;
          }
          if(strEmail.lastIndexOf(" ") >0){
          bolValid = false;
          }
          var intLastDot = strEmail.lastIndexOf(".")
          if(intLastDot == -1 ||  strEmail.length - intLastDot >4){
          bolValid = false;
          }
          var intAt = strEmail.lastIndexOf("@")
          if(intAt == -1 ||  strEmail.length - intAt < 5){
          bolValid = false;
          }
          if(!bolValid){
          strAlertMsg += "- "+ strMsg +" is Required.\n";
     if(!focusField) focusField =""+ strFieldName +"";
          }
     return bolValid;
}
//========================================================================
//Validate Radio Button
function checkRadioControl(theForm,strFieldName,strMsg){
          var objFormField = theForm.elements[strFieldName]
          intControlLength = objFormField.length
          bolSelected = false;
          for (i=0;i<intControlLength;i++){
          if(objFormField[i].checked){
          bolSelected = true;
          break;
          }
     }
     if(! bolSelected){
          strAlertMsg += "- "+ strMsg +" is Required.\n";
          return false;
          }
     return true;
}
//========================================================================
//Compare the Fields
function compareFields(theForm,strFieldName1,strFieldName2,strMsg){
          var objFormField1= theForm.elements[strFieldName1];
          var objFormField2= theForm.elements[strFieldName2];
          var strValue1= objFormField1.value;
          var strValue2= objFormField2.value;
     if(strValue1 != strValue2){
          strAlertMsg +="The "+ strMsg +" fields do not match, please try again.\n";
     if(!focusField) focusField =""+ strFieldName1 +"";
          return false;
          }
     return true;
}
//========================================================================
//Format Phone Number 9999999999 = (999)999-9999
//Call the function like so onKeyPress="javascript:formatPhone(this);
function formatPhone(objFormField){
     intFieldLength = objFormField.value.length;
     if(intFieldLength == 3){
          objFormField.value = "(" + objFormField.value + ") ";
          return false;
          }
    if(intFieldLength >= 9 && intFieldLength <= 10){
        objFormField.value = objFormField.value + "-";
        return false;
        }
}
//========================================================================
//End .js File
//Begin Page Validation
function validateForm(theForm){
strAlertMsg = ""
focusField = ""
     
     isEmpty(theForm,'Customer_Name','Name')
     isEmpty(theForm,'email','Email')
     isEmpty(theForm,'dDate','Date')
     checkRadioControl(theForm,'radio1','Radio')
     checkRadioControl(theForm,'radio2','Radio')
	 isEmpty(theForm,'PhoneB','textbox')
     checkRadioControl(theForm,'radio3','Radio')
	 checkRadioControl(theForm,'radio4','Radio')
     checkRadioControl(theForm,'radio5','Radio')
     checkRadioControl(theForm,'radio6','Radio')
     checkRadioControl(theForm,'radio7','Radio')
     checkRadioControl(theForm,'radio8','Radio')
     checkRadioControl(theForm,'radio9','Radio')
         if(strAlertMsg !=""){
          alert("Please correct the following errors:\n____________________________\n\n" + strAlertMsg);
          eval("theForm." + focusField + ".focus()");
        return false;
    }
    return true;
}
//-->
</script>
 
 
 
 
 
 
</head>
 
<body class="sub">
 
 
 
<form id="form1" action="" method="post" onsubmit="return validateForm(this);">
 
 
 
 
  <br />
 
  <table width="90%" border="0" cellspacing="2" cellpadding="4">
 
    
 
    <tr style="vertical-align: top">
 
      
 
      <td valign="top" nowrap="nowrap" style="width: 722px; height: 31px;">
 
        <table cellSpacing="0" cellPadding="0" align="left" border="0" style="width: 713px">
			<tr>
				<th style="FONT-SIZE: 12px; COLOR: white" noWrap bgColor="#4682b4">&nbsp; 
				Visual Impairment Form<img height="1" src="pixel.gif" width="10" border="0" /></th>
				<td>
				<img height="21" src="formtab_r.gif" width="10" border="0" /></td>
				<td width="100%" background="line_t.gif">&nbsp;</td>
			</tr>
		</table>
		</td>
 
    </tr>
 
    
 
    <tr style="vertical-align: top">
 
      
 
      <td valign="top" nowrap="nowrap" style="width: 722px">
 
        <p class="style2">
 
          <label id="lblCustome_Name" for="Customer_Name" class="style2">Name</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
          <input type="text" id="Customer_Name" name="Customer_Name" class="newStyle1" tabindex="0" /> <br />
 
          
          <br />
 
          <label id="lblemail" for="email" class="style2">Please enter your email address</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
          <input type="text" name="email" id="email" class="newStyle1" tabindex="0" /><br />
 
          <br />
 
          <label id="lbldDate" for="dDate" class="style2">Please enter today&#39;s date</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
          <input type="text" name="dDate" id="dDate" class="newStyle1" tabindex="0" />
 
          <br />
 
          <br />
 
          <br />
          
		<FIELDSET>
          <LEGEND> Do you need a screen reader to 
			access your computer?</LEGEND>
          
 
            <input type="radio" name="radio1" value="Yes" id="radio1" class="style2" tabindex="0" />
 
			Yes
 
          
 
          <label><input type="radio" name="radio1" value="No" id="radio1" class="style2" />
 
			No</label>
 
         </FIELDSET>
        <p class="style2">
 
         
 
        
 
        <label id="lblradio2" for="radio2">Do you need to hear your screen reader 
		while on the phone?</label>
 
          
		  
          <input type="radio" name="radio2" value="Yes" id="radio2" class="style2" tabindex="0" />
 
		Yes
 
          
          <input type="radio" name="radio2" value="No" id="radio2" class="style2" />
 
		No
 
        <p class="style2">
 
          <label id="lblFname" for="PhoneB">What brand and model of phone do you 
			use?<br /></label>
 
          <textarea name="PhoneB" id="PhoneB" rows="5" class="newStyle1" style="width: 373px" tabindex="0"></textarea>
 
         
 
        <p class="style2">
 
          
 
          <span class="style3">
 
          <label>Do you need a braille display for reading information on your 
			computer?</label>
 
          
 
          <label id="lblFname" for="radio3">
			<input type="radio" name="radio3" value="Yes" id="radio3" class="style2" tabindex="0" />
			Yes</label>
 
 
          <label>
 
          <input type="radio" name="radio3" value="No" id="radio3" class="style2" tabindex="0" />
 
			No</label>
 
          </span></p>
 
      <p class="style2"><span class="style3">
 
        <label>Do you prefer a 40 or 80 cell braille display?</label>
 
        
 
        <label id="lblFname" for="radio4">
		<input type="radio" name="radio4" value="40 cell" id="radio4" class="style2" tabindex="0" /> 
 
        40 cell</label>
 
        <label>
 
        <input type="radio" name="radio4" value="80 cell" id="radio4" class="style2" tabindex="0" />
 
		80 cell</label>
 
      </span></p>
 
      <p class="style2"><span class="style3">
 
        <label>Do you need to access printed materials to complete your daily 
		assignments?</label>
 
        
 
        <label id="lblFname" for="radio5"><input type="radio" name="radio5" value="Yes" id="radio5" />
 
		Yes</label>
 
        <label>
 
        <input name="radio5" type="radio" id="radio5" value="No" />
 
		No</label>
 
      </span></p>
 
      <p class="style2"><span class="style3">
 
        <label>Do you need to produce hardcopy braille materials in your daily 
		work activities?</label>
 
        
 
        <label id="lblFname" for="radio6"><input type="radio" name="radio6" value="Yes" id="radio6" />
 
		Yes</label>
 
        <label>
 
        <input type="radio" name="radio6" value="No" id="radio6" />
 
		No</label>
 
      </span></p>
 
      <p class="style2"><span class="style3">
 
        <label>Do you have access to a shared braille embosser (printer)?</label>
 
        
 
        <label id="lblFname" for="radio7"><input type="radio" name="radio7" value="Yes" id="radio7" />
 
		Yes</label>
 
        <label>
 
        <input type="radio" name="radio7" value="No" id="radio7" />
 
		No</label>
 
      </span></p>
 
      <p class="style2"><span class="style3">
 
        <label>Do you have issues locating keys on your keyboard?</label>
 
        
 
<label id="lblFname" for="radio8"><input type="radio" name="radio8" value="Yes" id="radio8" /> 
 
		Yes</label>
 
        <label>
 
        <input type="radio" name="radio8" value="No" id="radio8" />
 
		No</label>
 
      </span></p>
 
      <p class="StoryContentColor style2 style3"><span class="style2">
 
        <label>Do you need to take notes during meetings away from your desk 
		and/or in training sessions?</label>
 
        
 
        <label id="lblFname" for="radio9"><input type="radio" name="radio9" value="Yes" id="radio9" />
 
		Yes</label>
 
        <label>
 
        <input type="radio" name="radio9" value="No" id="radio9" />
 
		No</label>
 
      </span></p></td>
 
    </tr>
 
    
 
    <tr style="vertical-align: top">
 
      <td style="width: 722px">        
 
     <input type="submit" id="btnSubmit" name="btnSubmit" value="Submit" />
 
     <input type="reset" id="btnReset" name="btnReset" value="Reset" />
 
		</td>
 
    </tr>
 
  </table>
 
  
 
  </form>
 
 
 
 
</body>
 
</html>
[+][-]02.12.2008 at 07:09AM PST, ID: 20875371

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

Zone: JavaScript
Tags: JavaScript, IE 6,7
Sign Up Now!
Solution Provided By: hielo
Participating Experts: 3
Solution Grade: A
 
 
[+][-]02.12.2008 at 07:17AM PST, ID: 20875481

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.

 
[+][-]02.12.2008 at 07:20AM PST, ID: 20875529

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.

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