469,645 Members | 1,360 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,645 developers. It's quick & easy.

Form Validation

15
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:

Expand|Select|Wrap|Line Numbers
  1. function validateForm()
  2. {
  3.     // Required validation fields
  4.     var firstName = document.getElementById('cdFirstName');
  5.     var lastName = document.getElementById('cdLastName');
  6.     var addr = document.getElementById('cdAddress');
  7.     var city = document.getElementById('cdCity');
  8.     var postcode = document.getElementById('cdPostcode');
  9.     var state = document.getElementById('cdState');
  10.     var contactMsg = "Please provide either your home number, mobile number or a valid email address";
  11.  
  12.     var email = document.getElementById('cdEmail');
  13.     var mobile = document.getElementById('cdMobile');
  14.     var homePhone = document.getElementById('cdHomePhone');
  15.  
  16. //--> All required fields complete
  17.     if(isAlphabet(firstName, "Please enter your given name")){
  18.         if(isAlphabet(lastName, "Please enter your surname")){
  19.             if(isAddress(addr, "Please enter your postal address")){
  20.                 if(isAlphabet(city, "Please enter your city")){
  21.                     if(isAlphabet(state, "Please enter your State")){
  22.                         if(isNumeric(postcode, "Please enter a valid numeric postcode")){
  23.                             if(isNumeric(homePhone, contactMsg)){
  24.                                 if(isNumeric(mobile, contactMsg)){
  25.                                     if(emailValidator(email, contactMsg)){
  26.                                         return true;
  27.                                     }
  28.                                 }
  29.                             }
  30.                         }
  31.                     }
  32.                 }
  33.             }
  34.         }
  35.     }
  36.     return false;
  37. }
  38.  
  39.  
  40.  
  41. //--> Only one of (email address, homePhone or Mobile) is required for submission.
  42.  
  43.  
  44. function isEmpty(elem, helperMsg){
  45.     if(elem.value.length == 0){
  46.         alert(helperMsg);
  47.         elem.focus(); // set the focus to this input
  48.         return true;
  49.     }
  50.     return false;
  51. }
  52.  
  53. function isNumeric(elem, helperMsg){
  54.     var numericExpression = /^[0-9]+$/;
  55.     if(elem.value.match(numericExpression)){
  56.         return true;
  57.     }else{
  58.         alert(helperMsg);
  59.         elem.focus();
  60.         return false;
  61.     }
  62. }
  63.  
  64. function isAlphabet(elem, helperMsg){
  65.     var alphaExp = /^[a-zA-Z]+$/;
  66.     if(elem.value.match(alphaExp)){
  67.         return true;
  68.     }else{
  69.         alert(helperMsg);
  70.         elem.focus();
  71.         return false;
  72.     }
  73. }
  74.  
  75. function isAddress(elem, helperMsg){
  76.     if(elem.value.length > 0){
  77.         return true;
  78.     }else{
  79.         alert(helperMsg);
  80.         elem.focus();
  81.         return false;
  82.     }
  83. }
  84.  
  85. function emailValidator(elem, helperMsg){
  86.     var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
  87.     if(elem.value.match(emailExp)){
  88.         return true;
  89.     }else{
  90.         alert(helperMsg);
  91.         elem.focus();
  92.         return false;
  93.     }
  94. }
  95. </script>
Aug 19 '07 #1
15 1558
phvfl
173 Expert 100+
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:

Expand|Select|Wrap|Line Numbers
  1. if(isNumeric(homePhone, contactMsg)){
  2.   if(isNumeric(mobile, contactMsg)){
  3.     if(emailValidator(email, contactMsg)){
  4.       return true;
  5.     }
  6.   }
  7. }
  8.  
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:

Expand|Select|Wrap|Line Numbers
  1. if(condition1||condition2||condition3){
  2. //condition1 is true or condition2 is true or condition3 is true
  3. }else{
  4. //none of the conditions are true
  5. }
  6.  
Aug 19 '07 #2
gits
5,390 Expert Mod 4TB
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 ;)

Expand|Select|Wrap|Line Numbers
  1. // val should be 'foo' or 'bar' otherwise we return false
  2.  
  3. var return_val = false;
  4.  
  5. if (val == 'foo' || val == 'bar') {
  6.     return_val = true;
  7. }
  8.  
  9. return return_val;
  10.  
Expand|Select|Wrap|Line Numbers
  1. // we may write it better as
  2.  
  3. return (val == 'foo' || val == 'bar');
kind regards

PS: the above post has a good explaination concerning your problem ;)
Aug 19 '07 #3
MKO
15
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):

....
Expand|Select|Wrap|Line Numbers
  1. if(isNumeric(homePhone, contactMsg)) || (isNumeric(mobile,contactMsg)) || (emailValidator(email, contactMsg)){
  2.    return = true;
  3.    }else{
  4.    return false;
  5.    }
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
Aug 19 '07 #4
gits
5,390 Expert Mod 4TB
hey ...

i commented one line ;) of your code:

Expand|Select|Wrap|Line Numbers
  1. if (isNumeric(homePhone, contactMsg)) || (isNumeric(mobile, contactMsg)) || (emailValidator(email, contactMsg)) {
  2.     // this is an assignment (a typo i guess ;) ) but it 
  3.     // will not work that way (you will get a syntax error
  4.     // since return is a keyword)
  5.     return = true;
  6. } else {
  7.     return false;
  8. }
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:

Expand|Select|Wrap|Line Numbers
  1. if (val == 'foo') {
  2.     if (val1 == 'bar') {
  3.         // true condition code
  4.     }
  5. }
  6.  
is equivalent to:

Expand|Select|Wrap|Line Numbers
  1. if (val == 'foo' && val1 == 'bar') {
  2.     // true condition code
  3. }
  4.  
kind regards

ps: and please use CODE tags when posting code
Aug 19 '07 #5
MKO
15
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
Aug 19 '07 #6
gits
5,390 Expert Mod 4TB
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
Aug 19 '07 #7
gits
5,390 Expert Mod 4TB
and this is now a simplified example of your code:

Expand|Select|Wrap|Line Numbers
  1. // all of the following must be true (your required checks)
  2. if (val == 'foo' && val1 == 'bar') {
  3.     // now the following code is called otherwise it is not
  4.  
  5.     // our next check is for 'foobar' optional in val2 or val3
  6.     if (val2 == 'foobar' || val3 == 'foobar') {
  7.         // now we would proceed here ;)
  8.     }
  9. }
  10.  
and now you may see what we could do ... ok? the following is equivalent to the above:

Expand|Select|Wrap|Line Numbers
  1. if (val == 'foo' && val1 == 'bar' && (val2 == 'foobar' || val3 == 'foobar')) {
  2.     // now we would proceed here ;)
  3. }
  4.  
kind regards
Aug 19 '07 #8
MKO
15
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?

Expand|Select|Wrap|Line Numbers
  1. if(xVal > 10) || (yVal < 100) ....
  2.  
  3. or
  4.  
  5. if((xVal > 10) || (yVal < 100)) ....
  6.  
  7.  
I guess it is how to write the if statement when there are two different variables to compare.

Does this make sense?
Aug 19 '07 #9
gits
5,390 Expert Mod 4TB
hi ...

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

Expand|Select|Wrap|Line Numbers
  1. when (condition1istrue and condition2istrue) {
  2.    do something;
  3. }
a condition is for example:

Expand|Select|Wrap|Line Numbers
  1. (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:

Expand|Select|Wrap|Line Numbers
  1. true && true -> true
  2. true || false -> true
  3. false || true -> true
  4.  
kind regards
Aug 19 '07 #10
MKO
15
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:

Expand|Select|Wrap|Line Numbers
  1.  
  2. if(function(a,errMsg)) || (function(b,errMsg) etc......
  3.  
  4. or something like (i.e. drop error msg until end)
  5.  
  6. if(function(a,( || (function(b, (|| function(c,errMsg))))))) 
  7.  
  8.  
Aug 19 '07 #11
gits
5,390 Expert Mod 4TB
hi ...

ok ... let me explain it again ;)

the if-statement is used as followed:

Expand|Select|Wrap|Line Numbers
  1. if (cond == true) {
  2.     // do something
  3. } else {
  4.     // do other things
  5. }
so now we want to use a function that returns a boolean value like:

Expand|Select|Wrap|Line Numbers
  1. function cond_1(arg) {
  2.     // returns true in case arg == 'foo' else 
  3.     // it returns false
  4.     return (arg == 'foo');
  5. }
  6.  
  7. function cond_2(arg) {
  8.     // analogue to cond_1 when arg == 'bar'
  9.     return (arg == 'bar');
  10. }
  11.  
and when using the functions in our if-statement:

Expand|Select|Wrap|Line Numbers
  1. var arg = 'bar';
  2.  
  3. if ( cond_1(arg) || cond_2(arg) ) {
  4.     // do something
  5. }
  6.  
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
Aug 19 '07 #12
MKO
15
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
Aug 19 '07 #13
gits
5,390 Expert Mod 4TB
heya,

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

kind regards and

bis bald ;D
Aug 19 '07 #14
MKO
15
Hi

It worked (you knew it would).

Thanks again for all your help.

Cheers

M
Aug 19 '07 #15
gits
5,390 Expert Mod 4TB
;) 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
Aug 19 '07 #16

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

17 posts views Thread by Phil Powell | last post: by
16 posts views Thread by Hosh | last post: by
9 posts views Thread by julie.siebel | last post: by
7 posts views Thread by h7qvnk7q001 | last post: by
27 posts views Thread by Chris | last post: by
11 posts views Thread by Rik | last post: by
5 posts views Thread by lucyh3h | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.