Validation woes..

[Mhtml]

I've been turning towards javascript for client side error validation more and more and only using minor server side validation where I need to, and I'm picking it up (Yay for me!) :)

But I seem to have hit a wall. I was on a roll with this script but now I'm not sure of how to validate using many functions without returning more than 1 alert box.


function validate(){
if(document.tf.PollName.value == ''){
alert("Please enter a name for this poll!")
document.tf.PollName.focus()
return false
}
return validate2()
validate3()
}

function validate2(){
if(document.tf.Label1.value==''){
alert("Please enter your first option label's text!")
document.tf.Label1.focus()
return false
}
if(document.tf.Label2.value==''){
alert("Please enter your second option label's text!")
document.tf.Label2.focus()
return false
}else
return true
}

function validate3(){
if(document.tf.Label3.value==''){
alert("Please enter your third option label's text!")
document.tf.Label3.focus()
return false
}else{
return true
}
}
Ok I've highlighted the bit where I guess you could say it will stem from after the onsubmit="return validate()" has happend.

I tried switching that red text there with validate2(), validate3() but it will come up with the alert for both one after the other if the fields are empty.

What I'm trying to do is validate a maximum of 12 fields if the combo box OptionNo is set to 12 eg it has the numbers 2 through 12 and if the user selects 12 then 12 fields have to be validated if only 5 then 5 should be validated.

The field names are just Label# with # being the field number which increments for each field eg Label1, Label2, Label3 etc..

:)

[chrismiceli]

why not try this way, that way you don't get confused with the return true and false and different functions.
onSubmit="return validate"

i=0
function validate(){
if(document.tf.PollName.value == ''){
alert("Please enter a name for this poll!")
document.tf.PollName.focus();
i++
}
if(document.tf.Label1.value==''){
alert("Please enter your first option label's text!")
document.tf.Label1.focus()
i++
}
if(document.tf.Label2.value==''){
alert("Please enter your second option label's text!")
document.tf.Label2.focus()
i++
}
if(document.tf.Label3.value==''){
alert("Please enter your third option label's text!")
document.tf.Label3.focus()
i++
}
if (i != 0) {
return false
}
else
return true
}

[Mhtml]

Hey, that's neat. I never even thought of doing it that way. :)
Thanks, you have expanded my js volcabulary even more..

[chrismiceli]

no problem.:thumbsup:

[Mhtml]

BUT! It's not exactly what I wanted. Well it was to start with but the later of my post was explaining how I had to do a maximum of 12 if the user selected that many.

What you gave me was all well and good but I didn't explain well and I think I got mixed up. :D

Is there any way to adapt that code, not my existing code because chrismiceli's code is so much cooler than mine, into a way that it will only execute if for a certain amount of fields. Eg setting up an array to do it some how.

like if the user has selected 5 then for each object in the array 1 through 5 will be validated.

[chrismiceli]

i=0
test = new Array(11);
test[0] = "document.tf.Label1.value";
//etc
if (document.tf.PollName.value == '') {
alert("please enter a name for this poll");
document.tf.PollName.focus();
}
function validate(){
hi = document.selectname.options[document.selectname.selectedIndex].value - 1
for (var k = 0; k != hi; k++) {
test[k] = eval(test[k]);
if(test[k] == ""){
alert("Please enter text for option number " + k + 1 + "!")
i++
}
}
if (i != 0) {
return false
}
else
return true
}

try that. :thumbsup:

[RadarBob]

Couple of things:
[list=1]
A "main" function from which to call / drive all the validation calls.
Name all your fields the same, it makes things easier...
[/list=1]
As for #1,
Your code is close, but not quite. What I do is have a function that all it does is call the validation fucntions. It does not do any validation itself. Next each validation function returns a true or false (ie. "did validation pass?"). Then from the main function I can call an alert and control what I finally pass to the "submit return."

function validateForm (theForm) {
validForm = new Boolean (true);

validForm = validateFieldOne (theForm.fieldOne);
validForm = validateFieldTwo (theForm.fieldTwo);
// you can check validForm at any time and throw up an alert if desired.

return validForm
}// validateForm

function validateFieldOne (fieldOne) {
validField = new Boolean (true)

if (whatever is good) {
validField = true;
}else{
validField = false;
// throw up an appropriate alert if desired

return validField
}// validateFieldOne

The beauty of the above code shell is that there is only one "return" for the entire function. That keeps it simpler. also notice I alway explictly set the boolean, even though I initialized it. Just good technique. The other great thing is that this is very extensible; the basic code structure does not change as you add field validations.

Note that each individual field validation function has *it's own* boolean. That makes for very modular code struture and is critical for truly extensible code structure.

As for #2
If you name all the fields the same, then you can reference them as an array - it doesn't matter what kind of field we're talking about. The number the user selects can be passed to control the number of validations. I'm ASSUMING that all the fields are validated the same, just different fields...

// global string variable
errorString = new String ("Form Validation Results:\n");

function validateForm (theForm, howMany) {
validForm = new Boolean (true);

for (var i=0; i<howMany; i++) {
validForm = validateField (theForm.fieldName[i], i);
}

if (validForm == true) {
errorString += "No errors found - yay!\n");
}

alert (errorString);

return validForm;
}// validateForm

function validateField (theField, i) {
validField = new Boolean (true);

if (theField.value != '') {
validField = true;
}else{
validField = false;
errorString += "Option " + i + " must have a label.\n";
// make the error msg *specific*!!!
}

return validField;
}// validateField