IF Statement Problems (or possibly not!)

[Mark Morton]

I'm writing an if statement for a UK credit card form validation
script. Users who specify that their card is Switch need to enter
either the issue number or the 'valid from' date.

I'm trying to write an if statement so that if:

1. The word "Month" is in the validFromMonth field (where they haven't
selected a month a the drop-down menu) or the word "Year" is in the
validFromYear field (where they haven't selected a year another the
drop-down menu)
OR
2. Nothing has been entered in the text box for the Issue_Number

then the alert box appears

<SCRIPT language="text/javascript">
function checkform()
{
if (document.Final .Cardtype.value == "")
{
alert("Please specify the type of debit or credit card.");
return false;
}
if (document.Final .Cardholder.val ue == "")
{
alert("Please enter the Cardholder's Name.");
return false;
}
if (document.Final .Cardnumber.val ue == "")
{
alert("Please enter the card number.");
return false;
}
//check whether they need to supply an issue number/start date
var cc_type = document.Final. Cardtype.option s[document.Final. Cardtype.select edIndex].value;
if (cc_type == "Switch")
{
// if card is Switch then we need an issue number or start date

var IssNum = document.Final. Issue_Number.va lue
var fromM = document.Final. validFromMonth. value
var fromY = document.Final. validFromYear.v alue

if ((IssNum == "") || ((fromM == "Month") || (fromY == "Year")))
{
alert("You must supply an issue number or a 'Valid From' date for
Switch");
return false;
}
}
// if we reach this point then we submit the form.
return true;
}
//-->
</script>

By enclosing (fromM == "Month") || (fromY == "Year") in their own
brackets, I was hoping it would evaluate that first but it doesn't
seem to be working. The form wants a correct entry in all three before
allowing progress.

[I know I haven't written the checking bit for the expiry date yet,
I'm doing it in order!]

Any ideas?

[Vincent van Beveren]

> if ((IssNum == "") || ((fromM == "Month") || (fromY == "Year")))

{
alert("You must supply an issue number or a 'Valid From' date for
Switch");
return false;

The problem is that is IssNum != "" it still goes and validates the
other. This will never pass because unless you fill in ALL the blanks
it would never pass. the complecated thing is that you have to check
for all invalid combinations.

// issue number not filled in, and no month or year.
if ((IssNum == "") && ((fromM=="Month ") || (fromY=="Year") ))
{
alert("You must supply an issue number or....");
}

Though this will pass is someone enters an issue number and a valid
date. If you don't want that you should add that exception with an
or.

Good luck,
Vincent

[CryingClinton]

What's your point? I mean, what the problem is?

ccton
--
www.vicdir.com
"Mark Morton" <ma**@bustingmy chops.com> ????
news:e4******** *************** ***@posting.goo gle.com...

I'm writing an if statement for a UK credit card form validation
script. Users who specify that their card is Switch need to enter
either the issue number or the 'valid from' date.

I'm trying to write an if statement so that if:

1. The word "Month" is in the validFromMonth field (where they haven't
selected a month a the drop-down menu) or the word "Year" is in the
validFromYear field (where they haven't selected a year another the
drop-down menu)
OR
2. Nothing has been entered in the text box for the Issue_Number

then the alert box appears

<SCRIPT language="text/javascript">
function checkform()
{
if (document.Final .Cardtype.value == "")
{
alert("Please specify the type of debit or credit card.");
return false;
}
if (document.Final .Cardholder.val ue == "")
{
alert("Please enter the Cardholder's Name.");
return false;
}
if (document.Final .Cardnumber.val ue == "")
{
alert("Please enter the card number.");
return false;
}
//check whether they need to supply an issue number/start date
var cc_type = document.Final. Cardtype.option s[document.Final. Cardtype.select edIndex].value
; if (cc_type == "Switch")
{
// if card is Switch then we need an issue number or start date

var IssNum = document.Final. Issue_Number.va lue
var fromM = document.Final. validFromMonth. value
var fromY = document.Final. validFromYear.v alue

if ((IssNum == "") || ((fromM == "Month") || (fromY == "Year")))
{
alert("You must supply an issue number or a 'Valid From' date for
Switch");
return false;
}
}
// if we reach this point then we submit the form.
return true;
}
//-->
</script>

By enclosing (fromM == "Month") || (fromY == "Year") in their own
brackets, I was hoping it would evaluate that first but it doesn't
seem to be working. The form wants a correct entry in all three before
allowing progress.

[I know I haven't written the checking bit for the expiry date yet,
I'm doing it in order!]

Any ideas?

[Grant Wagner]

Mark Morton wrote:

I'm writing an if statement for a UK credit card form validation
script. Users who specify that their card is Switch need to enter
either the issue number or the 'valid from' date.
Whatever validation you do on the client _must_ be duplicated on the server. The client-side
validation is for the user's benefit only, there are any number of ways of submitting the form
without completing the form as specified in your client-side validation.
I'm trying to write an if statement so that if:

1. The word "Month" is in the validFromMonth field (where they haven't
selected a month a the drop-down menu) or the word "Year" is in the
validFromYear field (where they haven't selected a year another the
drop-down menu)
OR
2. Nothing has been entered in the text box for the Issue_Number

then the alert box appears

<SCRIPT language="text/javascript">
<script type="text/javascript">

The LANGUAGE attribute is deprecated, and used incorrectly above.
function checkform()
Presumably you're using <form ... onsubmit="retur n checkform();">? Change it to <form ...
onsubmit="retur n checkform(this) ;"> and the function definition above to be:

function checkform(myFor m)
{
if (document.Final .Cardtype.value == "")
I'm assuming Cardtype is a <select>? If so, use

if (myForm.element s['Cardtype'].options[myForm.elements['Cardtype'].selectedIndex].value == "")

Or if the first <option> is the empty one, simply:

if (myForm.element s['Cardtype'].selectedIndex == 0)

if (document.Final .Cardholder.val ue == "")
if (myForm.element s['Cardholder'].value == "")

Note that if the user enters one or more spaces, this test will think the input has data in it. To
fix this, use the string manipulation at:

<url: http://jibbering.com/faq/#FAQ4_16 />

Then you can use:

if (myForm.element s['Cardholder'].value.trim() == "")
if (document.Final .Cardnumber.val ue == "")
Same as above.
//check whether they need to supply an issue number/start date
var cc_type = document.Final. Cardtype.option s[document.Final. Cardtype.select edIndex].value;
You're retrieving the value of a <select> correctly here, yet above and below this you seem to be
doing it by simply retrieving the .value attribute of the <select>. Also, you should do this
earlier, then you can use cc_type to test whether they've selected a CC type at all.
if (cc_type == "Switch")
{
// if card is Switch then we need an issue number or start date

var IssNum = document.Final. Issue_Number.va lue
var fromM = document.Final. validFromMonth. value
var fromY = document.Final. validFromYear.v alue
Retrieve these <select> values using the syntax shown earlier.
if ((IssNum == "") || ((fromM == "Month") || (fromY == "Year")))
From your surrounding text and output of the alert(), I'm assuming you need either an issue number
or valid "From" date. So your logic is (in english): show an error when IssNum is empty, or fromM
is "Month" and fromY is "Year" (because that means a complete date hasn't been chosen). Converting
this to Javascript gets you:

if (IssNum == "" || (fromM == "Month" && fromY == "Year"))

The brackets are not actually required since && has higher precedence then ||, but I like to make
the intent clear.
//-->
Not needed. Omit.
</script>

By enclosing (fromM == "Month") || (fromY == "Year") in their own
brackets, I was hoping it would evaluate that first but it doesn't
seem to be working. The form wants a correct entry in all three before
allowing progress.
Javascript evaluates conditions from left to right (observing precedence rules and brackets on the
way). Once it's determined conclusively the truth or falseness of the entire condition, it stops
evaluating. This means if you do something like:

if (false && whateverElseYou WantToTest())

the function "whateverElseYo uWantToTest()" will _never_ be executed. Javascript sees the result of
the part before the && is false. It's an &&, both expressions _must_ be true for the entire
condition to be true, but the first expression is false. It does not matter what the second
expression returns, the entire condition will always be false, so Javascript stops after seeing
"false".

This is what allows you to do:

if (someObject != null && someObject.some Method())

normally, trying to call someMethod() on a null someObject would cause an error, but when
someObject == null, the first expression of the && is false, therefore the entire condition is
false and Javascript never even executes the 2nd expression. This lets you do things like:

With a set of || conditions, Javascript must always evaluate all 3 expressions to determine if any
of them are true.

But in your case the logic was simply wrong.
Any ideas?

Doing it the way you are doing it is annoying, because you tell the person one thing they did
wrong, then they correct that and try to submit again only to be told the next thing they did
wrong, so they correct that, then they're told the 3rd thing they did wrong, and so on.

Better to build a string containing all the mistakes they made and alert everything at once.

Something like:

var errorMsg = [];
var firstFieldToFoc us;
if (formField1 != 'whatever') {
errorMsg.push(' Test1 failed');
if (!firstFieldToF ocus) {
firstFieldToFoc us = formField1;
}
}
if (formField2 != 'whatever') {
errorMsg.push(' Test2 failed');
if (!firstFieldToF ocus) {
firstFieldToFoc us = formField2;
}
}
// etc

if (errorMsg.lengt h > 0) {
alert(
'Please correct the following' +
' errors before continuing:\n\n- ' +
errorMsg.join(' \n- ')
);
if (firstFieldToFo cus) {
firstFieldToFoc us.focus();
}
}

The code also places the cursor in the first of the input boxes containing errors. This behaviour
is optional, your users may not appreciate the form scrolling almost to the top, they may prefer
to fix the problems in their own order.

--
Grant Wagner <gw*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq