Javascript: Form validation?

Question

The problem I'm guessing is in the visacard function, I set it so if the card number text input length is != to 16 (the length of a card number) it will alert and say invalid. But the problem is even if the length is equal to 16 it still says invalid

    <body>
        <script type="text/javascript">
            function fun(){
                var ddl = document.getElementById("cardtype");
                var selectedValue = ddl.options[ddl.selectedIndex].value;
                if (selectedValue == "cardtype1"){
                    alert("Please select card type");
                }   
            }

            function visacard(){
               var ffl = document.getElementById("cardtype");
               var words = parseFloat(document.getElementById("ccn").value);
               var selectedVisa = ffl.options[ffl.selectedIndex].value;
               var fin = words.length;

               if (selectedVisa == "visa" && words.length != 16 ){
                   alert("Invalid card number, Try again");
               }
            }

        </script>



        <select id="cardtype">
            <option value="cardtype1"> - Card Type - </option>
            <option value="visa">Visa</option>
            <option value="amex">Amex</option>
            <option value="mastercard">Mastercard</option>
        </select>

        <p>Credit Card Number <input type="text" id="ccn"/></p>
        <p>CVV <input type="text" id="cvv"/></p>


        <select name="DOBMonth">
    <option> - Month - </option>
    <option value="January">January</option>
    <option value="Febuary">Febuary</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
</select>

        <select name="DOBYear">
    <option> - Year - </option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>



        </select>


        <input type="button" onClick="fun();visacard();" value="click here">

    </body>
</html>

I think you are looking for HTML5 Form Validation which uses regex for granular cases. — Ronnie Smith
– Ronnie Smith, Commented Nov 30, 2016 at 4:01
According to Wikipedia credit card numbers can be up to 19 numbers long and for Visa they can be 13, 16 or 19. I would recommend you search for "javascript validate credit card numbers" and look at some of the robust methods used instead of using length. — cmp-202
– cmp-202, Commented Nov 30, 2016 at 4:18
Is there a reason you are accepting credit card details yourself? Do you have a merchant account with a bank to process the cards you receive? Might save you a lot of work to sign up with a payment gateway and redirct to them. Let them handle the security and processing. Just give them your template requirements. — cmp-202
– cmp-202, Commented Nov 30, 2016 at 4:49

user6269864 · Accepted Answer · 2016-11-30 04:00:13Z

1

This is because the length of your words which has a type of float is undefined.

Example:

console.log(parseFloat(1111).length); //undefined

You can use toString() to convert the number into string.

if (selectedVisa === "visa" && words.toString().length !== 16 ){

Two unrelated notes:

Don't force the user to select Visa/MasterCard. You can decide it yourself based on the first digit of the BIN (4 = Visa, 5 = MasterCard).
Don't use non-strict comparisons like == and !=, use === and !== instead.

answered Nov 30, 2016 at 4:00

user6269864

Sign up to request clarification or add additional context in comments.

3 Comments

Jaromanda X Over a year ago

=== and !== have their place, as do == and !=

user6269864 Over a year ago

@JaromandaX not in this code. For beginners they nearly always mean that you don't understand what your code does. Worse, if you don't know what your code does, you wouldn't know the result of things like ("0" == null) or ("0.00" == false), which will lead to bugs that are hard to trace.

cmp-202 Over a year ago

Ultimately I don't think testing by length is the solution because it is fraught with inaccuracy to handle CC number characteristics. There are specific regular expressions that can be used to test the number validity based on the primary industry number indicating if it is visa or MasterCard etc. One example I found here uses an expression /^(?:4[0-9]{12}(?:[0-9]{3})?)$/ for Visa.

Collectives™ on Stack Overflow

Javascript: Form validation?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related