CODEWITHSUNDEEP
javascript
Wes
Wes

Reputation: 451

Javascript: Form validation?

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>

Upvotes: 1

Views: 42

Answers (1)

user6269864
user6269864

Reputation:

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.

Upvotes: 1

Related Questions