Dynamic Form Validation troubles

[kevhouston740]

Old time CF guy needing to do some client side form validation.

I have a form that creates some dynamic SELECT fields that are like named. CriteriaID1, CriteriaID2 etc.

I can hard code the form and it works as expected. When I try to make it dynamic I am obviously missing something and would like a quick, swift kick in the head to right me.

The working code is:

if ( !checkSelect(form.CriteriaID1) ) {
errors[errors.length] = "You must answer Criteria 1.";
}

function checkSelect(select){
return (select.selectedIndex > 0);
}

non working dynamic code
var jsCriteria = 3;

for (var i=1; i <= jsCriteria; i++) {
if ( !checkSelect(form.CriteriaID[i]) ) {
errors[errors.length] = "You must answer Criteria [i].";
}
}
function checkSelect(select){
return (select.selectedIndex > 0);
}

I appreciate your help.

Kev

[toicontien]

As a best practice, I prefer to use the elements collection of a form object to refer to the input fields:

function checkSelect(select){
	return (select.selectedIndex > 0);
}

for (var i = 0, length = form.elements.CriteriaID1.length; i < length; i++) {
	if ( !checkSelect(form.elements.CriteriaID1[i]) ) {
		errors.push("You must answer Criteria [" + i + "].");
	}
}

Some more info: JavaScript, DOM, and the Humble FORM.

Edit: Also, inside the if statement you referred to form.CriteriaID not form.CriteriaID1?

[kevhouston740]

Thanks! I think I see what you are saying...

[kevhouston740]

Your more info link helped a bit. I am getting a better understanding.

CriteriaID1 is the hardcoded form element
CriteriaID[i] is my attempt at refering to the form field dynamically.

I want to reference the dynamically named selectbox form fields. The dynamic form fields are numbers I want to check form.CriteriaID1 see if it has a value if it doesn't add it to the list of errors. Then check the next dynamically named field named: form.CriteriaID2, etc. I was trying to use the variable [i] to identify the different form fields, like form.CriteriaID[i] where i is looping over the number of question per the users previous answer.

I am successfully able to pass the jsCriterid value into the function.

Here is what i now have:

for (var i = 1; i <= jsCriteriaID; i++) {
var zdrop = "form.CriteriaID" + i;
if ( !checkSelect([zdrop]) ) {
errors[errors.length] = "You must answer Criteria " + i;
}
}

function checkSelect(select){
alert( "here we go " + select);
return (select.selectedIndex > 0);
}

I put the alert into the checkSelect () function to test the passed zdrop variable and it appears to pass correctly (Form.CriteriaID1 etc.) but it isn't running the checkSelect () function correctly or returning the expected value. Regardless if I answer 0 criteria, ALL criteria or any number in between it tells me I must review all of them.

[kevhouston740]

Ok for those of you who might stumble upon this type of problem here is the solution that I came up with. toicontien's comment wasn't exactly correct, as written but his suggestion and the links to the other reference material that I read lead me on the correct path.

for (var i = 1; i <= jsCriteriaCount; i++) {
var zdrop = after.elements["CriteriaName" + i];
if ( !checkSelect(zdrop) ) {
errors[errors.length] = "You must answer Criteria " + i;
}
}

The problem was with how I was trying to reference the document element(s). "after" is the name of my form.

What I had reworked on my 3rd post lead me down a path that seemed like it would work, but ended up in 2 days of futility. While this is not completely dynamic just two modification (the form name and element name) and it will work on any page. IF you can add comments about how to make this drag and drop please feel free. I am always looking for better ways to do things.

Kev

[toicontien]

I would recommend renaming all the CriteriaName1...CriteriaNameN fields to just CriteriaName[]. That way the POST params that hit the backend script will already have an array to deal with, and you can reference them dynamically in JavaScript using:

after.elements["CriteriaName[]"]