You're here: Snippet Directory » HTML/JavaScript (65)
Language:

b4submit.js

Language: English
Programming Language: JavaScript
Published by: jb4mt [not registered]
Last Update: 5/15/2006
Views: 1094

Description

Javascript routine ensures every form field has a value regardless of form field type

Code

1 /* 2 You can either cut and paste this right between script tags within HTML head tags 3 or put it in a seperate file and use the script tag's src attribute. 4 In either case you could call the function as follows: 5 <form onSubmit='return RequiredFieldsFilled(this,"","")'> 6 Or see b4submit.htm with which this script will be "packaged" for an example 7 of using an intermediate function that defines forms not required and 8 a more meaningful error message 9 */ 10 11 function RequiredFieldsFilled(thisForm,skipField,errorCaptions) { 12 13 var formFields = thisForm.elements 14 15 var unFilledElements = new Array() 16 17 /* 18 The following are 'associative' or 'hash' arrays that can be indexed by 19 something other than an integer, that are implemented in JavaScript 1.2 20 and higher (Versions 4 and higher of the major browsers), and should be 21 familiar to CGI/Perl programmers. 22 */ 23 var checkBoxRadioGroups = new Array() 24 var firstGroupElement = new Array() 25 26 /* 27 Javascript 1.2+ "Regular Expression" (also common to CGI/Perl scripts) 28 for matching a pattern of zero or more instances of blank or "white" space 29 in text fields 30 */ 31 var noText = /^\s*$/ 32 33 var selection 34 var isCheckBoxOrRadio 35 36 for (var fieldNum = 0; fieldNum < formFields.length; fieldNum++) { 37 38 var formField = formFields[fieldNum] 39 var fieldName = formField.name 40 var fieldType = formField.type 41 42 /* 43 Skip fields specified by user as not requiring validation, as well as 44 other types of fields not ordinarily validated 45 */ 46 if (skipField[fieldName] == true 47 || fieldType == "hidden" 48 || fieldType == "submit") 49 { 50 continue 51 } 52 53 /* 54 Trim the field type to the first four characters so that: 55 "text" and "textarea" 56 are handled identically by the following switch construct, as are: 57 "select_one" and "select_many" 58 */ 59 fieldType = fieldType.substr(0,4) 60 61 switch(fieldType) { 62 /* 63 "Cases", in terms of HTML form fields: 64 65 1) <input type="text"> or <textarea> 66 2) <select>, regardless of "multiple" attribute (pull-down menus) 67 3/4) <input type="checkbox"> <input type="radio"> 68 69 Assign the form's element number to the "unFilledElements" array, for 70 text fields and/or pull-down menus for which the user didn't specify 71 a value 72 */ 73 74 case "text": 75 if (noText.test(formField.value)) { 76 unFilledElements[unFilledElements.length] = fieldNum 77 } 78 isCheckBoxOrRadio = false 79 break 80 81 case "sele": 82 selection = formField.selectedIndex 83 /* 84 If no choice was made, selection will equal -1 if "multiple" was 85 specified as an attribute of the select tag, 0 if "multiple" NOT 86 specified 87 */ 88 if (selection == -1 || (selection == 0 && !formField.options[0].value)) { 89 unFilledElements[unFilledElements.length] = fieldNum 90 } 91 isCheckBoxOrRadio = false 92 break 93 /* 94 ADDITIONAL NOTES REGARDING PULL DOWN MENUS: 95 96 To specify the top visible choice from a select menu as a LABEL for 97 the list below it, and not a valid choice, do NOT specify a value 98 attribute for that option; for instance: 99 100 <SELECT name="firstChoiceLabel"> 101 <OPTION>Make Your Choice for President from the list below 102 <OPTION value="tweedledum">Bush 103 <OPTION value="tweedledee">Gore 104 </SELECT> 105 106 If, the first option IS a valid choice, a value attribute needs to be 107 specified for it. If existing code has a value attribute specified, 108 DON'T change it, as the server side process for the form may need it. 109 If a value isn't previously specified, you can safely do so by 110 making it identical to the human readable text; for instance: 111 112 <SELECT name="firstChoiceNOTLabel"> 113 <OPTION value="Valid Choice 1">Valid Choice 1 114 <OPTION value="Valid Choice 2">Valid Choice 2 115 </SELECT> 116 117 This will ensure compatability with any existing server-side process, 118 because before specifying a value attribute it was using the human 119 readable anyway. 120 */ 121 122 case "chec": 123 isCheckBoxOrRadio = true 124 break 125 126 case "radi": 127 isCheckBoxOrRadio = true 128 break 129 130 default: 131 /* 132 Skips <input type="file">; this might be handled in future versions 133 similar to text and textareas: by just checking for a visible value 134 */ 135 isCheckBoxOrRadio = false 136 continue 137 138 } // switch(fieldType) 139 140 if (isCheckBoxOrRadio) { 141 /* 142 Designates whether so-named checkbox or radio button was specified by 143 user, IF not already specified as true 144 */ 145 if (checkBoxRadioGroups[fieldName] != true) { 146 checkBoxRadioGroups[fieldName] = formField.checked 147 } 148 /* 149 Designates the FIRST element of the so-named group of checkbox or 150 radio buttons 151 */ 152 if (firstGroupElement[fieldName] == null) { 153 firstGroupElement[fieldName] = fieldNum 154 } 155 } 156 157 } // for var fieldNum = 0..... 158 159 /* 160 Check for selections from GROUPS of checkboxes/radio buttons AFTER all 161 individual fields have been processed 162 */ 163 for (var groupName in checkBoxRadioGroups) { 164 if (checkBoxRadioGroups[groupName] == false) { 165 unFilledElements[unFilledElements.length] = firstGroupElement[groupName] 166 } 167 } 168 169 /* 170 At least one field left unfilled so the user receives an error message and 171 the form is NOT submitted 172 */ 173 if (unFilledElements.length > 0) { 174 /* 175 Numerically sort the element numbers contained in the unFilledElements 176 array (using an "anonymous" function), which is necessary because entries 177 for groups of checkboxes and/or radio buttons were added AFTER all 178 individual field elements were processed, and so could be out of order 179 */ 180 unFilledElements = unFilledElements.sort(function(a,b) {return a-b}) 181 182 /* 183 To return the focus to the first unfilled field; the form must be named 184 or the following code isn't evaluated 185 */ 186 if (thisForm.name) { 187 eval("document." + thisForm.name + ".elements[" + unFilledElements[0] 188 + "].focus()") 189 } 190 191 var errorAlert = "Please fill out the following " + unFilledElements.length 192 errorAlert += " required field(s) you left unfilled:\n\n" 193 194 /* 195 Build the list of fields for the error message either from 196 author-specified captions, or from the field names themselves 197 */ 198 for (var elementNum = 0; elementNum < unFilledElements.length; elementNum++) 199 { 200 var unFilledFieldName = formFields[unFilledElements[elementNum]].name 201 if (errorCaptions[unFilledFieldName] != null) { 202 errorAlert += (errorCaptions[unFilledFieldName] + "\n") 203 } else { 204 errorAlert += (unFilledFieldName + "\n") 205 } 206 } 207 208 alert(errorAlert) 209 return false 210 211 } // if (unFilledElements.length > 0) 212 213 /* 214 Otherwise the form was filled out properly 215 The alert line is optional, and other functionality can be added here 216 The "return true" line is NOT optional 217 */ 218 alert("Thanks for filling out all the required fields!") 219 return true 220 221 }

No comments avaiable

Add a comment

Name *  

Email (won't be displayed) *    

Website  

Comment *  

Sicherheitscode Security Code *    

RSS