0

In the following javascript/html - I'm trying to validate two items:
1) That if a user doesn't select a payment type - they are prompted to do so
2) That if Visa and Mastercard are selected and if the number or expire date is blank - they are prompted to do so.

The problem is that the paymentCheck javascript doesn't fire - does anyone see why and also are my validations for the two scenerios correct?

<html>

<head>
<script type="text/javascript">
function paymentCheck(form1){

if(document.form1.payment.Visa.checked == false) || (document.form1.payment.Mastercard.checked == false) || (document.form1.payment.Check.checked == false) 
     {
        alert ("Please select a payment method");
        form1.payment.focus(); 

            return(false); 
    }

if(document.form1.payment.Visa.checked == true) || (document.form1.payment.Mastercard.checked == true) && (document.form1.card.value == "") || (document.form1.exp.value == "") 
     {
        alert ("Please enter in a card or expiration number");
        form1.card.focus(); 

            return(false); 
            }
        return(true);
    }
</script>

</head>

<body>

<FORM METHOD="post" action="" onsubmit="return paymentCheck(this)" name="form1" id="form1">
<TABLE BORDER=0>
<TR VALIGN="top">
        <TD ALIGN="right"><FONT SIZE=2><B>Payment Method:</B></FONT></TD>
        <TD ALIGN="left">
                <INPUT NAME="payment" TYPE="radio" VALUE="Visa">Visa<BR>
                <INPUT NAME="payment" TYPE="radio" VALUE="Mastercard">Mastercard<BR>
                <INPUT NAME="payment" TYPE="radio" VALUE="Check">Personal Check<BR>
        </TD>
</TR>
<TR VALIGN=:top">
        <TD ALIGN="right"><FONT SIZE=2><B>Card Number/Expiration Date:</B></FONT></TD>
        <TD ALIGN="left"><INPUT NAME="card" SIZE=16>/<INPUT NAME="exp" SIZE=5></TD>
</TR>
<TR VALIGN=:top">
        <TD ALIGN="right"><FONT SIZE=2><B>Card Code Number:</B></FONT></TD>
        <TD ALIGN="left"><INPUT NAME="cardcode" SIZE=5></TD>
</TR>
<TR VALIGN=TOP>
    <TD ALIGN=RIGHT><INPUT TYPE="reset" VALUE="Reset"></TD>
    <TD ALIGN=LEFT><INPUT TYPE="submit" VALUE="Complete Order"></TD>
</TR>
</TABLE>

</FORM>

</body>
</html>
2
Contributors
1
Reply
12
Views
6 Months
Discussion Span
Last Post by vsmash
0

Your script is firing but because there are errors, the form submits and you don't see the error. Switch your Preserve log on in your developer tools so you can see errors.
Corrected code is below but you can always use a credit card validation library so that visa/mastercard etc are detected and validated.

<html>
<head>
<script type="text/javascript">
function paymentCheck(form1){
    if(!form1.payment.checked) 
        {
            alert ("Please select a payment method");
            form1.payment[0].focus(); 
            return(false); 
        }else{
            if(form1.card.value.length<15 || form1.exp.value.length<4){
            alert ("Please enter a valid card or expiration number");
            form1.cardcode.focus(); 
            return(false); 
        }
        return(true);
}}

</script>
</head>
<body>
<FORM METHOD="post" action="" onsubmit="return paymentCheck(this)" name="form1" id="form1">
<TABLE BORDER=0>
<TR VALIGN="top">
        <TD ALIGN="right"><FONT SIZE=2><B>Payment Method:</B></FONT></TD>
        <TD ALIGN="left">
                <INPUT NAME="payment" TYPE="radio" VALUE="Visa">Visa<BR>
                <INPUT NAME="payment" TYPE="radio" VALUE="Mastercard">Mastercard<BR>
                <INPUT NAME="payment" TYPE="radio" VALUE="Check">Personal Check<BR>
        </TD>
</TR>
<TR VALIGN=:top">
        <TD ALIGN="right"><FONT SIZE=2><B>Card Number/Expiration Date:</B></FONT></TD>
        <TD ALIGN="left"><INPUT NAME="card" SIZE=16>/<INPUT NAME="exp" SIZE=5></TD>
</TR>
<TR VALIGN=:top">
        <TD ALIGN="right"><FONT SIZE=2><B>Card Code Number:</B></FONT></TD>
        <TD ALIGN="left"><INPUT NAME="cardcode" SIZE=5></TD>
</TR>
<TR VALIGN=TOP>
    <TD ALIGN=RIGHT><INPUT TYPE="reset" VALUE="Reset"></TD>
    <TD ALIGN=LEFT><INPUT TYPE="submit" VALUE="Complete Order"></TD>
</TR>
</TABLE>
</FORM>
</body>
</html>

Edited by vsmash

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.