Member Avatar for koneill

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
  • 297 Views
  • 42 Minutes Discussion Span
  • Latest Post Latest Post by vsmash
Member Avatar for vsmash

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
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.