Well, I do intend on doing Server side validation, however the reason I want to do client side validation is so they can't add 1000 rows real quickly. Here are the details:
I have setup a few functions to add fields to an already existing form. The only problem I face is that the user can add as many forms as they want. That's not so much a problem itself, but I'd like to make it a little more difficult for them to add a whole bunch at one time. In order to do that, I want to check all visible form fields on the page and pop up a message if there are blank inputs.
See example:
http://www.blasterstudios.com/dev/crossroads/
Basically onclick of a image calls a function addParent(); inside that function at the right spot, i am using return validateParents();
Here is the validateParents() function:
var allrows = document.getElementsByTagName("tr");
var validRows = new Array();
function validateParents(){
for (var i = 0; i < allrows.length; i++) {
if (allrows[i].getAttribute('id') != null && allrows[i].getAttribute('id').match('parentRow'+'*')) {
var therow = allrows[i].getAttribute('id');
if(document.getElementById(therow).style.display != 'none' || document.getElementById(therow).style.display == ''){
validRows[validRows.length] = therow;
}
}
}
for (var i = 0; i < validRows.length; i++) {
var fieldno = validRows[i].replace("parentRow","");
var input = validRows[i].replace("parentRow","parentName");
var combo = validRows[i].replace("parentRow","parentTitle");
if(document.registerNew.+input+.value == "" || document.registerNew.+combo+.value == "0"){
var error = "yes";
}
}
if (error == "yes"){
alert("Please fill in all parent names and relationships before adding more rows");
return false;
} else {
return true;
}
} The jist of this function is:
1. it puts all <TR> elements of the page in an array (allrows).
2. it checks the allrows array for rows where the display is set to '' or not set to 'none'. put those values in an array (validRows).
I have tested it up to this point and it works. The next part is what I can't get to work.
3. Loop through all elements inside the validRows array to check if the values of the form objects are empty.
4. If it finds one that's empty, set the variable "error" to yes.
5. once it's done, check the error variable and see if it's equal to "yes", and if so, do the alert and stop the function addParent();
6. if it's not "yes" then continue on with addParent();
I think the problem is that I'm not sure how to insert those variables (input and combo) into the form validation. There may be more wrong, but I'm pretty sure that much is not right.