Form Validation

[MKO]

Hi guys

I'm having a little trouble with form validation, I can get the entire form to validate without problems (i.e. when all fields set to required & valid data is entered) but can't get it to work when some are required and others are optional (but one of the optional fields is required).

I'm hoping that its something that Im overlooking but I've tried a number of ways and can't get valid results.

If anyone has any suggestions on how to get this to work it would be great, or if there is a better method of validation that I'd love to hear it too.

Many thanks



Here is the problem:

function validateForm()
{
    // Required validation fields
    var firstName = document.getElementById('cdFirstName');
    var lastName = document.getElementById('cdLastName');
    var addr = document.getElementById('cdAddress');
    var city = document.getElementById('cdCity');
    var postcode = document.getElementById('cdPostcode');
    var state = document.getElementById('cdState');
    var contactMsg = "Please provide either your home number, mobile number or a valid email address";
 
    var email = document.getElementById('cdEmail');
    var mobile = document.getElementById('cdMobile');
    var homePhone = document.getElementById('cdHomePhone');
 
//--> All required fields complete
    if(isAlphabet(firstName, "Please enter your given name")){
        if(isAlphabet(lastName, "Please enter your surname")){
            if(isAddress(addr, "Please enter your postal address")){
                if(isAlphabet(city, "Please enter your city")){
                    if(isAlphabet(state, "Please enter your State")){
                        if(isNumeric(postcode, "Please enter a valid numeric postcode")){
                            if(isNumeric(homePhone, contactMsg)){
                                if(isNumeric(mobile, contactMsg)){
                                    if(emailValidator(email, contactMsg)){
                                        return true;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    return false;
}
 
 
 
//--> Only one of (email address, homePhone or Mobile) is required for submission.
 
 
function isEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return true;
    }
    return false;
}
 
function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
 
function isAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
 
function isAddress(elem, helperMsg){
    if(elem.value.length > 0){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
 
function emailValidator(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
</script>

[phvfl]

Hi MKO,

Due to the nested if statements you are requiring that all of the statements are matched for the function to return true. Assuming that all other statements are true the logic for the homePhone, mobile and email fields is:

if(isNumeric(homePhone, contactMsg)){
  if(isNumeric(mobile, contactMsg)){
    if(emailValidator(email, contactMsg)){
      return true;
    }
  }
}
 

This means that homePhone must be numeric AND mobile must be numeric AND email must match a valid email pattern.

You need to have the logic so that is test that homePhone must be numeric OR mobile must be numeric OR email must match a valid email pattern.

The simplest way to do this would be to put all three tests into one if condition and use or between each condition i.e:

if(condition1||condition2||condition3){
//condition1 is true or condition2 is true or condition3 is true
}else{
//none of the conditions are true
}
 

[gits]

hi ...

welcome to TSDN ...

to your problem ... have a look at the following example that makes use of an combined condition and the combination is done with an logical OR ;)

// val should be 'foo' or 'bar' otherwise we return false
 
var return_val = false;
 
if (val == 'foo' || val == 'bar') {
    return_val = true;
}
 
return return_val;
 

// we may write it better as
 
return (val == 'foo' || val == 'bar');

kind regards

PS: the above post has a good explaination concerning your problem ;)

[MKO]

Thanks for the reply's

Not sure that I understand the whole && and || in the if statements yet. This is what I think your suggesting (hope I'm right):

....

if(isNumeric(homePhone, contactMsg)) || (isNumeric(mobile,contactMsg)) || (emailValidator(email, contactMsg)){
   return = true;
   }else{
   return false;
   }

Q. Can this be inserted within all the other if statements or do I need to start another statement to deal with it on its own?

Thanks again for the help

[gits]

hey ...

i commented one line ;) of your code:

if (isNumeric(homePhone, contactMsg)) || (isNumeric(mobile, contactMsg)) || (emailValidator(email, contactMsg)) {
    // this is an assignment (a typo i guess ;) ) but it 
    // will not work that way (you will get a syntax error
    // since return is a keyword)
    return = true;
} else {
    return false;
}

and yes ... now you would ask for a num home-phone-no OR mobile-phone-number OR a valid email-ad ... and you may put it within your bunch of if-statements ... in case you want to check that as the last thing within your check:

using the following:

if (val == 'foo') {
    if (val1 == 'bar') {
        // true condition code
    }
}
 

is equivalent to:

if (val == 'foo' && val1 == 'bar') {
    // true condition code
}
 

kind regards

ps: and please use CODE tags when posting code

[MKO]

Hi

Thanks, I don't quite get it but I'll read up some more and take what you've said and hopefully I'll understand it later..... (never know).

You mentioned to use CODE tags. What do you mean by this for future reference?

Cheers

[gits]

hi ...

you should wrap the code you are going to post here in the so called CODE-tags ... have a look here ... it helps the readers of your posts to better read and understand your questions due to the better formatting and syntax-highlighting of your code ...

what exactly are you not understanding ... feel free to ask any question ... ok ;) your last attempt was near the solution ...

kind regards

[gits]

and this is now a simplified example of your code:

// all of the following must be true (your required checks)
if (val == 'foo' && val1 == 'bar') {
    // now the following code is called otherwise it is not
 
    // our next check is for 'foobar' optional in val2 or val3
    if (val2 == 'foobar' || val3 == 'foobar') {
        // now we would proceed here ;)
    }
}
 

and now you may see what we could do ... ok? the following is equivalent to the above:

if (val == 'foo' && val1 == 'bar' && (val2 == 'foobar' || val3 == 'foobar')) {
    // now we would proceed here ;)
}
 

kind regards

[MKO]

Hi

I see the wrap buttons now, thanks.

What I don't understand is the if/or part.

I understand if(myVal > 10 || myVal <100) ..... in one statement, What I don't get is something like this:

Which is correct?

if(xVal > 10) || (yVal < 100) ....
 
or
 
if((xVal > 10) || (yVal < 100)) ....
 
 

I guess it is how to write the if statement when there are two different variables to compare.

Does this make sense?

[gits]

hi ...

your line 5 is correct ...let me give you an idea what it does i use pseudocode:

when (condition1istrue and condition2istrue) {
   do something;
}

a condition is for example:

(a > b)

and may return true or false ... ok?

the if-statement evaluates only one boolean-value and when you use the AND or OR-operators you make an logical expression that returns a boolean value for the if-statement that follows the logic-pattern for example:

true && true -> true
true || false -> true
false || true -> true
 

kind regards

[MKO]

Hi

Im now confused with the if(function(......) part, so here goes with another 'dumb' question (it was easier learning German that JavaScript), is the correct procedure:

 
if(function(a,errMsg)) || (function(b,errMsg) etc......
 
or something like (i.e. drop error msg until end)
 
if(function(a,( || (function(b, (|| function(c,errMsg))))))) 
 
 

[gits]

hi ...

ok ... let me explain it again ;)

the if-statement is used as followed:

if (cond == true) {
    // do something
} else {
    // do other things
}

so now we want to use a function that returns a boolean value like:

function cond_1(arg) {
    // returns true in case arg == 'foo' else 
    // it returns false
    return (arg == 'foo');
}
 
function cond_2(arg) {
    // analogue to cond_1 when arg == 'bar'
    return (arg == 'bar');
}
 

and when using the functions in our if-statement:

var arg = 'bar';
 
if ( cond_1(arg) || cond_2(arg) ) {
    // do something
}
 

as you can see our cond_2(arg) function returns true because arg == 'bar' so the expression in our if-statement evaluates to true and we go into the branch of the if-statement ... ok? everything has to be wrapped in brackets after the if ... because the entire expression is to be evaluated! have a close look at the given example ...

kind regards

[MKO]

Hi gits

Thanks heaps for your help. Not sure I understand fully how to do it but I'll take on board what you said and have another look at it next week.

Again thanks

Vielen Dank

Bis bald

[gits]

heya,

no problem ... ask whenever you need help :)

kind regards and

bis bald ;D

[MKO]

Hi

It worked (you knew it would).

Thanks again for all your help.

Cheers

M

[gits]

;) as i said ... no problem, glad to hear you got it working ... and post back to the forum whenever you have more questions ...

kind regards