How to validate different HTML forms using the same script.

[ghjk]

I want to validate my php site. I created javascript file for the validate functions. Eg:

function validateFormOnSubmit(theForm) {
 
var reason = "";
 
 
 
  reason += validateEmpty(theForm.from);
 
  reason += validateUsername(theForm.username);
 
  reason += validatePassword(theForm.pwd);
 
  reason += validateEmail(theForm.email);
 
  reason += validatePhone(theForm.phone);
 
 
 
 
 
  if (reason != "") {
 
    alert("Some fields need correction:\n" + reason);
 
    return false;
 
  }
 
 
 
  return true;
 
}
 
// validate empty fields
 
function validateEmpty(fld) {
 
    var error = "";
 
 
 
    if (fld.value.length == 0) {
 
        fld.style.background = 'Yellow'; 
 
        error = "The required field has not been filled in.\n"
 
    } else {
 
        fld.style.background = 'White';
 
    }
 
    return error;  
 
}

But the thing is different pages have different number of fields.(page 1 have 5 text boxes, page 2 have 10 text boxes etc.). So could you please tell me how can I use the same validate file to every page?

[code green]

You could collect the fields into an array and loop through them
Maybe have a hidden HTML variable on each form specifying how many fields there are.

This means naming the form elements elem1 elem2 elem3 so the function can handle them dynamically.
ie psuedocode

size = sizeof(theForm.elements[]);
for(c=1;c<size;c++)
{
    //pass to function
   function(theForm.elements['elem'.c];
   function(theForm.elements['elem'.c];
}

Sorry can't quite remember how HTML arrays work and my javascript is shaky

[Dormilich]

@code green
not at all, there are none ;)

back to the problem. It depends on which form elements need checking.

easiest case: all form elements need checking, then loop through theForm.elements[]

if all but one or two, you can exclude them inside the loop (if you know which ones)

you could also group all elements to be checked either with a common class name or a common parent element (e.g. <fieldset>) and use that to select those.

[code green]

not at all, there are none

Yup,I am thinking of URL variable arrays.
But the genaral idea is to name the form elements in such a way that they can be reffered to dynamically

size = theForm.noOfElements; //Hidden variable
for(c=1;c<size;c++) 
{ 
    //pass to function 
   function(theForm.'elem'.c); 
   function(theForm.'elem'.c); 
} 

[Atli]

Moved to the Javascript forum.