How do I get form validator script to work with an array?

I am trying to implement the JavaScript Form Validation script from Javascript-Coder.com that can be found here.

I have it working for elements on a form, but I am wondering how to get it to work with an array. Specifically I have a form on a webpage here, which the user can add rows to. Then I have the following form:

<form method="post" name="booking" id="booking" action="bookingengine.php">
    <fieldset>
        <h2>Waged/Organisation Rate</h2>
       <p>
            <input type="text" name="name[]" id="name">
            <input type="text" name="email[]" id="email">
            <input type="text" name="organisation[]" id="organisation">
            <input type="text" name="position[]" id="position">
        </p>
        <p><span class="add">Add person</span></p>
    </fieldset>

    <fieldset>
        <h2>Unwaged Rate</h2>
        <p>
            <input type="text" name="name2[]" id="name2">
            <input type="text" name="email2[]" id="email2">
        </p>
        <p><span class="add">Add person</span></p>
    </fieldset>

    <p><input type="submit" name="submit" id="submit" value="Submit and proceed to payment page" class="submit-button" /></p>

</form>

Currently the form validator script looks like this:

<script  language="JavaScript" type="text/javascript">
 var frmvalidator = new Validator("booking");

 frmvalidator.addValidation("email[]","req","Please enter a valid email address");
 frmvalidator.addValidation("email[]","email","Please enter a valid email address");

</script>

But, if the user adds a second row to the top section of the form, the script only validates the email address in the first row, and I am wondering how I would get it to validate every row that is added to the form as well.

ADDITIONAL INFORMATION

Following the advice of Melsi the script for generating the form and handling validation has been completely rewritten. The answer by Melsi below includes the following features that I requested (most of which were in the original script too):

1. The form is now empty on page load, and all rows (text boxes) are added dynamically by the user using buttons.
2. The default values for each text box show when a new row is added with a unique colour.
3. When the user clicks in each text box the colour for text and background changes.
4. A 'Remove' button is added to the end of each row so that rows can be deleted.

VALIDATION NEEDED

The validations needed for each row are as follows:

1. Name: is not 'Name' (Message: "Please enter your name"), max 100 characters (Message: "Your name should be less than 100 characters")
2. Email: is a valid email address (Message: "Please enter a valid email address"), max 100 characters (Message: "Your email address should be less than 100 characters")
3. Position: is not 'Position' (Message: "Please enter your position or N/A if not applicable"), max 100 characters (Message: "Your position should be less than 100 characters")
4. Organisation: is not 'Organisation' (Message: "Please enter your organisation or N/A if not applicable"), max 100 characters (Message: "Your organisation should be less than 100 characters")

Then I would need a validation for submitting the form which checks that a row has been added to the form, with the message "Please add at least one person to your booking"

Example of validation:

//validate-name
box=document.getElemen开发者_StackOverflowtById(caller).name.charAt(0);
if(box=='n'){
if((document.getElementById(caller).value)=='Name')
    { 
        alert('Please enter your name')
        document.getElementById('message').innerHTML="<span>Please enter your name</span>";
        //put focus back again if you like
        document.getElementById(caller).focus();
        return;
    }   
}           
//if code comes here = validation success   
  document.getElementById(caller).style.backgroundColor = '#F5FEC1'; 
  document.getElementById('message').innerHTML="<span style="+dbq+"background-color: #A3BB00"+ dbq+">Thanks!</span>"; 
 }

---

You can add an onchange event on every field even in the dynamic ones, they will call the validator as sson as they are changed so the user knows in no time if it was a valid entrance.

==========edited part, there was some code here that is replaced with a better version=====

I wrote this code in a hurry, color example is applied, new line example is too, remove is added too, empty box on focus is applied too and all other things asked.

<html>
<head>
<script type="text/javascript">

/**
A dynamic name is assigned to a new field created.
*/ 
var id=0;
var dbq="\"";

/************************* addRow function end ******************************************/
 function addRow(count)
 { 
 /**
 Decide what fieldset is going to host the row
 */
    var myFieldset='fieldset2';
    var section='2';
    if(count==4){
        myFieldset='fieldset1';
        var organisationID = id++;
        var positionID = id++;
       var section=''
        }  
 /**
    Create ids
 */
    divID = id++;
    nameID = id++;
    emailID = id++;  
 /**
    The row will be hosted in a div
 */
    var myDiv = document.createElement("div"); 
         myDiv.setAttribute("id", divID);  
 /**
    Create the text boxes
 */
    myDivInnerHTML=
    '<input type=text name=name'+section+'[]'+' value=Name id='+nameID+
    ' onFocus='+dbq+'emptyTheBox('+nameID+');'+dbq+ 
    ' onkeyup='+dbq+'changeInputColor('+nameID+');'+dbq+ 
    ' onBlur='+dbq+'fieldValidator('+nameID+');'+dbq+
    ' style='+dbq+'color:#66634F;'+dbq+' >'+   

    '<input type=text name=email'+section+'[]'+' value=Email id='+emailID+
    ' onFocus='+dbq+'emptyTheBox('+emailID+');'+dbq+
    ' onkeyup='+dbq+'changeInputColor('+emailID+');'+dbq+    
    ' onBlur='+dbq+'fieldValidator('+emailID+');'+dbq+  
    ' style='+dbq+'color:#66634F;'+dbq+'>' ;
 /**
    Decide if we need 4 or 2 boxes
 */
    if(count==4)
    myDivInnerHTML=myDivInnerHTML+
    '<input type=text name=organisation'+section+'[]'+' value=Organisation id='+organisationID+
    ' onFocus='+dbq+'emptyTheBox('+organisationID+');'+dbq+
    ' onkeyup='+dbq+'changeInputColor('+organisationID+');'+dbq+ 
    ' onBlur='+dbq+'fieldValidator('+organisationID+');'+dbq+  
    ' style='+dbq+'color:#66634F;'+dbq+' >'+   

    '<input type=text name=position'+section+'[]'+' value=Position id='+positionID+
    ' onFocus='+dbq+'emptyTheBox('+positionID+');'+dbq+
    ' onkeyup='+dbq+'changeInputColor('+positionID+');'+dbq+ 
    ' onBlur='+dbq+'fieldValidator('+positionID+');'+dbq+ 
    ' style='+dbq+'color:#66634F'+dbq+'>' ;
 /**
    Create a button to remove the row too.
 */
    myDivInnerHTML=myDivInnerHTML+
    '<input type=button class="remove" value="Remove"  onClick='+dbq+'removeDiv('+divID+','+ myFieldset +');'+dbq+' >';   
 /**
    Add the div-row to the fieldset
 */
    myDiv.innerHTML = myDivInnerHTML; 
    document.getElementById(myFieldset).appendChild(myDiv);      
 }
/************************* addRow function end ******************************************/

 /**
    Change the color of the text being entered
 */
function changeInputColor(caller){   
    document.getElementById(caller).style.color = 'black';
}

 /**
    Remove a row on demand
 */
function removeDiv(divID, myFieldset){ 
    myFieldset.removeChild(document.getElementById(divID)); 
}

 /**
    Empty the box on initial click
 */
function emptyTheBox(caller)
{
    var val=document.getElementById(caller).value;
    if(val=='Name' || val=='Email' || val=='Organisation' || val=='Position'  ) 
        document.getElementById(caller).value='';  
 }
/**
    Display a message
 */
 function echo(message)
 {
        document.getElementById('message').innerHTML="<h3>"+message+"</h3>";   
 }


/**********************Validates a single field, return false on fail************************/
function fieldValidator(caller)
 {  
    var error='';
    /** 
        Identify the field (if it is email, name etc) by getting the first character
        which is always the same,also get its value and full name
    */  
    var currentFieldCategory = document.getElementById(caller).name.charAt(0);
    var currentFieldValue = document.getElementById(caller).value; 
    var currentField = document.getElementById(caller);

    /** 
        Check for empty value
    */
     if(currentFieldValue == '')
     {
        echo('Please fill the data!');currentField.focus(); 
        return 'Please fill the data!';
     }  
    /** 
        Check if default value left behind  
    */  
    if(currentFieldValue.toLowerCase()=="name" || currentFieldValue.toLowerCase()
    =="email" || currentFieldValue.toLowerCase()=="organisation" ||
    currentFieldValue.toLowerCase()=="position" )  
    { 
        echo('Please check you entry, default data left behind!');currentField.focus();   
        return 'Please check you entry, default data left behind!';
    }    
    /** 
        Validate the NAME field
    */   
    if(currentFieldCategory=='n')
    {
        if(currentFieldValue.match(/^[ |'|-]/)||!(/^[a-zA-Z- ']*$/.test(currentFieldValue))
            || currentFieldValue.length<4 || currentFieldValue.length>70)  
        {
            echo('Non valid name found!');currentField.focus();   
            return 'Non valid name found!';
        }//inner if
    }//outer if
    /** 
        Validate a non empty EMAIL name field
    */  
    if(currentFieldCategory=='e')
    {
        var atpos=currentFieldValue.indexOf("@");
        var dotpos=currentFieldValue.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=currentFieldValue.length) 
        {
            echo('Non valid email found!');currentField.focus();   
            return 'Non valid email found!';
        }//inner if 
    }//outer if
    /** 
        Validate a non empty ORGANIZATION name field
    */  
    if(currentFieldCategory=='o')
    {
        if(currentFieldValue.length<2 || currentFieldValue.length>50)
        {
            echo('Use at least 2 letters and less than 50 for your organisation.'); 
            currentField.focus();           
            return 'Use at least 2 letters and less than 50 for your organisation.';        
        }//inner if  
    }//outer if 
    /** 
        Validate a non empty POSITON name field
    */  
    if(currentFieldCategory=='p')
    {
        if(currentFieldValue.length<7 || currentFieldValue.length>40)
        {
            echo('Use at least 7 letters and less than 40 to describe your position.');
            currentField.focus(); 
            return 'Use at least 7 letters and less than 40 to describe your position.';            
        }//inner if 
    }//outer if     
    /** 
        Now on success do the rest
    */  
    document.getElementById(caller).style.backgroundColor = '#FF9900';  
    document.getElementById('message').innerHTML="";
    return true;
 }
 /*****************fieldValidator ***function ends*****************************************/



/*******************************************************************************************/
function finalValidator()
{
    /**
        Get the form object
    */  
    var myForm=document.getElementById('booking').elements;
    /**
        Check if the form has no rows, for now 3 indicates no rows,
        BE CAREFULL it might change if more buttons added,
        just alert the length to see.
    */  
    if(myForm.length==3)
        return false; 
    /**
        Iterate through the form for all fields
    */  
    for(var i = 0; i < myForm.length; i++)
        {   
            //If it is a text field validate it
            if(myForm[i].type=='text')
            {
                var validation = fieldValidator(myForm[i].id);
                if(validation!==true)
                {
                    echo (validation);
                    return false;//prevent submit
                }//validation if
            }//field type if 
        }//for loop   
}//function
/*******************************************************************************************/


</script> 

</head>
<body bgcolor=gray>

<div id="add-buttons"><span class="add" onclick="addRow(4);"><input type="button" class="button" value="Add Waged Person"></span><span class="add" onclick="addRow(2);"><input type="button" class="button" value="Add Unwaged Person"></span></div>


<div id="message"  ></div>
<div id="form-wrap">
<form method="post" name="booking" id="booking" action="bookingengine.php">
    <fieldset id="fieldset1">
        <div class="subtitle">Waged/Organisation Rate</div>
    </fieldset> 

    <fieldset  id="fieldset2">
        <div class="subtitle">Unwaged Rate</div>
    </fieldset>

   <!-- return finalValidator will allow submit only if fields are validated-->
    <p><input type="submit" name="submit" id="submit"  onClick="return finalValidator();" 
     value="Submit booking" class="submit-button" /></p>
</form> 


</body>
</html>

Validation added. The array and the color things are a bit trivial and you should show what effort you have done here your self.It is interesting to be involved only when you see the will on someone.

---

I've decided to add an other answear cause there is some other-additional things I want to mention about debuging.

As for the error you mention it caused by this line:

<div id="booking" style="font-size:16px;margin-bottom:10px;padding:5px">Please add the number of people 

---

Why did this happen?

If you look closer it has got an id assigned the value booking, but you also have the html form assigned the same id, this create a conflict as javascript does not know which one do you mean.

---

Advices

-You always devide things when debuging, this means that you had to run the script above on its own, if it run okay and then when embeded in you application did not then you know 100% there is a conflict.

-You mentioned a particular function creating the problem (and you were right), then you had to go inside the function and put one alert('Hello there whatever!'); on a line at a time starting from the very very top, as soon an alert is not poped then you know which line has the problem. Then you alert the variables on this line to see if they have the value they should have... most probably the value will not have the value must have and you problem has beome very small already.

That's for now, take care of the id's, they must be unique! If you see my example I assign an increasing index on them at the end

id="someElement"+(id++);

Sorry if this is too much to read... but debuging the wrong way can be more pain than that (there are some god tutorials on debuging!).