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>
15 1643
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 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 ;) -
// 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 ;)
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 5,390
Expert Mod 4TB
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
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 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
gits 5,390
Expert Mod 4TB
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
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 5,390
Expert Mod 4TB
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:
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
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 5,390
Expert Mod 4TB
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
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 5,390
Expert Mod 4TB
heya,
no problem ... ask whenever you need help :)
kind regards and
bis bald ;D
Hi
It worked (you knew it would).
Thanks again for all your help.
Cheers
M
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
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
|
4 posts
views
Thread by bnp |
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
| | | | | | | | | | | | |