IF Statement Problems (or possibly not!)

M

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.value == "")
{
alert("Please enter the Cardholder's Name.");
return false;
}
if (document.Final.Cardnumber.value == "")
{
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.options[document.Final.Cardtype.selectedIndex].value;
if (cc_type == "Switch")
{
// if card is Switch then we need an issue number or start date

var IssNum = document.Final.Issue_Number.value
var fromM = document.Final.validFromMonth.value
var fromY = document.Final.validFromYear.value

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?
 
V

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
 
G

Grant Wagner

Mark said:
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="return checkform();">? Change it to <form ...
onsubmit="return checkform(this);"> and the function definition above to be:

function checkform(myForm)
{
if (document.Final.Cardtype.value == "")

I'm assuming Cardtype is a <select>? If so, use

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

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

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

if (document.Final.Cardholder.value == "")

if (myForm.elements['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.elements['Cardholder'].value.trim() == "")
if (document.Final.Cardnumber.value == "")

Same as above.
//check whether they need to supply an issue number/start date
var cc_type = document.Final.Cardtype.options[document.Final.Cardtype.selectedIndex].value;

You're retrieving the value of a <select> correctly here, yet above and below this you seem to be
if (cc_type == "Switch")
{
// if card is Switch then we need an issue number or start date

var IssNum = document.Final.Issue_Number.value
var fromM = document.Final.validFromMonth.value
var fromY = document.Final.validFromYear.value

Retrieve these said:
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 && whateverElseYouWantToTest())

the function "whateverElseYouWantToTest()" 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.someMethod())

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 firstFieldToFocus;
if (formField1 != 'whatever') {
errorMsg.push('Test1 failed');
if (!firstFieldToFocus) {
firstFieldToFocus = formField1;
}
}
if (formField2 != 'whatever') {
errorMsg.push('Test2 failed');
if (!firstFieldToFocus) {
firstFieldToFocus = formField2;
}
}
// etc

if (errorMsg.length > 0) {
alert(
'Please correct the following' +
' errors before continuing:\n\n- ' +
errorMsg.join('\n- ')
);
if (firstFieldToFocus) {
firstFieldToFocus.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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top