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):
- The form is now empty on page load, and all rows (text boxes) are added dynamically by the user using buttons.
- The default values for each text box show when a new row is added with a unique colour.
- When the user clicks in each text box the colour for text and background changes.
- 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:
- Name: is not 'Name' (Message: "Please enter your name"), max 100 characters (Message: "Your name should be less than 100 characters")
- 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")
- 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")
- 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.getElementById(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>";
}
