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>";
}
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.
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.