[RESOLVED] More form validation

[ScottTheScot]

Hi there

I have been working on a form validation script for eons it seems. I have cobbled bits together from all over the place in an attempt to create a generic script (including help from members of this site) that I can use with any of my forms. Most of the script works fine.

Select lists are causing me a real problem. I have trawled the web and found a number of scripts but they either are designed to work with only one select list or they use the name of the fields to refer to the lists. What I'm trying to achieve is a script that can inform the user via an error message when a select list that is a required field hasn't had a selection made without referring to the name of the field. Is this even remotely possible? If not I would appreciate someone telling me so. Does anyone know of a webpage that uses this type of validation? I know this is a big ask but I need to get it working somehow so any pointers in the right direction would be very much appreciated. Below is my code so far lines 94 to a 100 are my latest pathetic attempt:

001 window.onload = CustomPageLoad;
002 function CustomPageLoad(){
003 BodyOnLoad();                        // Still requires the standard page load functions
004 if (window.location.href.match(/Input-/)) {       // Form Type Input
005    for (var f = 0 ; f < document.forms.length; f++) {
006       for (var e = 0; e < document.forms[f].elements.length; e++) {
007         var el=document.forms[f].elements[e] ;
008     if (el.className.match(/ReadOnly/)) {         // Match to CSS Style of ReadOnly
009         el.disabled=true;                 // Set disabled property
010                 } 
011         if (el.type=="button") {                  // If it is a button
012                if ((el.value=="Complete")            // If the form class action closes the form
013                 || (el.value=="Save Active")
014                 || (el.value=="Send")
015                 || (el.value=="Sign Off")
016                 || (el.value=="Restraint Form"))
017                             {     
018                 el.onmousedown=verify;
019                 el.onmouseup=RemoveRO;
020                     }
021         if ((el.value=="Save Draft")            // If the form class action doesn't close the form
022                 || (el.value=="Print") 
023                 || (el.value=="Re open"))
024                             {     
025                 el.onmouseup=RemoveRO;
026                     }
027                 }
028               }
029             }
030       }
031 }
032 function RemoveRO() {
033     for (var rf = 0 ; rf < document.forms.length; rf++) {
034           for (var re = 0; re < document.forms[rf].elements.length; re++) {
035             var rel=document.forms[rf].elements[re] ;
036      if (rel.className.match(/ReadOnly/)) {         // Match to CSS Style of ReadOnly
037        rel.disabled=false                 // UnSet disabled property
038             }
039         }
040     }
041 }
042 //Returns true if a string contains only whitespace characters
043 function isblank(s) {
044     for(var i = 0; i < s.length; i++) {
045         var c = s.charAt(i);
046 //        if ((c != ' ') ) {
047 //            alert (" hey the value is " + c.value);
048 //            return false;
049         if ((c != ' ') && (c != '\n') && (c != '')) { return false;
050 //        if ((c != ' ') && (c != '\n')) return false;
051         }
052     return true;
053     }
054 }
055 //Verifys fields with a class of Required
056 function verify(f) {
057     var msg;
058     var empty_fields = "";
059     var errors = "";
060     var aRadioName = new Array();
061     var checked = "no";
062     var selindx= false
063         // Loop  through the forms
064         for (var i = 0 ; i < document.forms.length ; i++) 
065             {
066             //loop through the elements
067             for (var e = 0 ; e < document.forms[i].elements.length; e++) {
068                 var ie=document.forms[i].elements[e] ;
069                     // Check if the field is text, text area and has a class of ' Required'
070                     if (((ie.type == "text") || (ie.type == "textarea")) && ie.className.match (/ Required/)) {
071 //                        // Check if the field is empty
072                         if ((ie.value == null) || (ie.value == "") || isblank(ie.value)) {
073                             empty_fields += "\n        " + ie.name;
074                             continue;
075                                         }                
076                         //Check for numeric fields TOTALDAYSUSED is set to a max of 92 TOTALHOURS USED set to 23 max
077                         if (ie.numeric || (ie.min != null) || (ie.max != null)) {
078                             var v = parseFloat(ie.value);
079                                 if (isNaN(v) ||
080                                 ((ie.min != null) && (v < ie.min)) ||
081                                 ((ie.max != null) && (v > ie.max))) {
082                                 errors += "- The field " + ie.name + " must be a number";
083                                     if (ie.min != null) 
084                                         errors += " that is greater than " + ie.min;
085                                     if (ie.max != null && ie.min != null) {
086                                             errors += " and less than " + ie.max;
087                                                 }
088                                     else if (ie.max != null)
089                                         errors += " that is less than " + ie.max;
090                                     errors += ".\n";
091                                     }
092                                 }
093                             }
094                         if (ie.selected == true ) {
095                                 selindx = true;
096                                     return;
097                                 if (selindx == false) { alert("it's false");
098                                 errors += "you must make a selection " + ie.name;
099                                     }
100                                 }
101                         //make all input tags an array
102                         //walk through all the inputs
103                         }
104             i = document.getElementsByTagName("input");
105                 for (x = 0; x < (i.length)-1; x++)
106                         //now walk through each radio group and save all the groups in an array
107                         {
108                         //walk through and look at radio buttons
109                             if (i(x).type=="radio")
110                                     {
111                                 //Added to radio name array
112                                 str = aRadioName.join()
113                                 if (str.search(i(x).name)==-1) {aRadioName.push(i(x).name) }
114                                     }
115                         }
116 //                if (checked=="no"){errors += "At least one box must be checked" + "\r"}
117                 //now walk through each group and find out if they have an option checked
118                 var RadioChecked = new Array()
119                     for (y = 0;y<(aRadioName.length);y++)
120                         {
121                         RadioChecked[y] == "no"
122                             for (x = 0;x<(i.length)-1;x++)
123                                 {
124                                 if (i(x).type=="radio" && i(x).name==aRadioName[y] && i(x).checked==true) { RadioChecked[y]="yes" }
125                                 }
126                             if (RadioChecked[y] != "yes")
127                                 {
128                                 errors += "A Radio button " + aRadioName[y] + " must be selected" + "\r"
129                                 }
130                         }
131             }
132                 
133 //        If there are no empty fields or errors return true to prevent the form from being submitted.        
134     if (!empty_fields && !errors) return true;
135         msg = "________________________________\n\n";
136         msg += "The form was not submitted because of the following error(s).\n";
137         msg += "Please correct these error(s) and re-submit.\n";
138 //        msg += ie.name + "\n";
139         msg += "________________________________\n\n"    
140     // If there are empty required fields display a message with the field names.
141     if (empty_fields) {
142         msg += "- The following required field(s) are empty:"
143         + empty_fields + "\n";
144             if (errors) msg += "\n"; 
145     }
146     msg += errors;
147     alert(msg);
148     return false;
149     } 

[Fang]

var aSelect=document.getElementsByTagName('select');
for(var i=0; i<aSelect.length; i++) {
    if(!aSelect[i].selectedIndex) {
        alert('make a selection'); 
        aSelect[i].focus();
        break;
        }
    }

[ScottTheScot]

Hi Fang

Thanks for your help, it works perfectly.

Regards

Scott