CODEWITHSUNDEEP
javascripthtml
bloppit
bloppit

Reputation: 641

Why isn't my credit card validation working?

I'm adding a credit card validation to a form.

If the user clicks the register button and there is a not a valid credit card number then there will be an error flagged, the label will turn red.

It also makes sure that CVV field and zip code field are not empty.

Right now if I click the button when the fields are empty, I get the errors as needed.

If I then fill the zip code and CSV and click register again, then the error are removed.

Nothing removes the CC number flag though.

Why is this and how can I fix it?

Code is below, thank you:

// Form validation. Display error messages and don't let the user submit the form if any of these validation errors exist:
document.querySelector("button").addEventListener("click", function(e) {

    //check there's a valid credit card number
    var ccNum = document.getElementById("cc-num");
    var ccNumLbl = document.getElementById("cc-numLbl");


// takes the form field value and returns true on valid number
//algorithm found here: https://gist.github.com/DiegoSalazar/4075533
function valid_credit_card(value) {
  // accept only digits, dashes or spaces
    if (/[^0-9-\s]+/.test(value)) return false;

    // The Luhn Algorithm. It's so pretty.
    var nCheck = 0, nDigit = 0, bEven = false;
    value = value.replace(/\D/g, "");

    for (var n = value.length - 1; n >= 0; n--) {
        var cDigit = value.charAt(n),
              nDigit = parseInt(cDigit, 10);

        if (bEven) {
            if ((nDigit *= 2) > 9) nDigit -= 9;
        }

        nCheck += nDigit;
        bEven = !bEven;
    }

    return (nCheck % 10) == 0;
}


    if(!valid_credit_card(ccNum.input)) {
        ccNumLbl.style.color = "red";
        e.preventDefault();
    } else {
        ccNumLbl.style.color = "black";
    }

    //check there's a zip code
    var zip = document.getElementById("zip");
    var zipLbl = document.getElementById("zipLbl");
    if(zip.value.length === 0) {
        zipLbl.style.color = "red";
        e.preventDefault();

    } else {
        zipLbl.style.color = "black";
    }

    //check there's a cvv
    var cvv = document.getElementById("cvv");
    var cvvLbl = document.getElementById("cvvLbl");
    if(cvv.value.length === 0) {
        cvvLbl.style.color = "red";
        e.preventDefault();

    } else {
        cvvLbl.style.color = "black";
    }

});

And the html:

<div id="credit-card" class="credit-card">

  <div class="col-6 col">
    <label id="cc-numLbl" for="cc-num">Card Number:</label>
    <input id="cc-num" name="user_cc-num" type="text">
  </div>

  <div class="col-3 col">
    <label for="zip" id="zipLbl">Zip Code:</label>
    <input id="zip" name="user_zip" type="text"> 
  </div>

  <div class="col-3 col">
    <label id="cvvLbl" for="cvv">CVV:</label>
    <input id="cvv" name="user_cvv" type="text"> 
  </div>

  <label>Expiration Date:</label>
  <select id="exp-month" name="user_exp-month">
    <option value="1">1 - January</option>
    <option value="2">2 - February</option>
    <option value="3">3 - March</option>
    <option value="4">4 - April</option>
    <option value="5">5 - May</option>
    <option value="6">6 - June</option>
    <option value="7">7 - July</option>
    <option value="8">8 - August</option>
    <option value="9">9 - September</option>
    <option value="10">10 - October</option>
    <option value="11">11 - November</option> 
    <option value="12">12 - December</option>                       
  </select>  
  <select id="exp-year" name="user_exp-year">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>                      
  </select>                                
</div>

<button type="submit">Register</button>

Upvotes: 0

Views: 429

Answers (1)

David R
David R

Reputation: 15639

Seems you are trying to get the text input object instead of its value. You need to change your ccNum variable assignment to,

var ccNum = document.getElementById('cc-num').value;

Also the querySelector function was failing in your code for which I have made the <input type="button"...> declaration as (added a class attribute to it),

<input type="button" class="button" id="myBtn" value="Validate" />

And changed the document.querySelector(...) function as 

document.querySelector(".button").addEventListener("click", function(e) {

Working DEMO : https://jsfiddle.net/nmvk9ks7/1/

Hope this helps!

Upvotes: 1

Related Questions