Teddu Teddu - 4 years ago 177
Javascript Question

Credit Card Expiry Date validation in Jquery

Though this question has been asked previously too, but it didn't work for me. So I am asking this question.
I want to apply validation on expiry date of credit card number. That means if expiry date is before the current date then it should print an error message below the expiry date dropdowns. Below is my HTML code:



$('#billmanagementform').validate({
rules: {
cardExpYear: {
CCExp: {
month: '#cc-exp-month',
year: '#cc-exp-year'
}
}
}
});

$.validator.addMethod('CCExp', function(value, element, params) {
var minMonth = new Date().getMonth() + 1;
var minYear = new Date().getFullYear();
var month = parseInt($(params.month).val(), 10);
var year = parseInt($(params.year).val(), 10);
return (year > minYear || (year === minYear && month >= minMonth));
}, 'Your Credit Card Expiration date is invalid.');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<form id="billmanagementform">
<div class="col-sm-2 col-md-2 col-xs-4">
<select name="cc-exp-month" id="cc-exp-month" class="wide100 required">
<option value="" selected="selected">Month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-sm-4 col-md-4 col-xs-8">
<select name="cc-exp-year" id="cc-exp-year" class="wide100 required">
<option value="" selected="selected">Year</option>
<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>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
</div>
</form>





But this code is not at all working for me. Could you please tell that where I am going wrong?

Answer Source

Validation rules binds an element with validation methods (e.g. required, etc.)

The rules object should contain key-value pairs where, key is the name attribute of the element, and value is an object containing one or more validation methods

So, cardExpYear must point to name attribute of some element(s). Changing the name of the select should do the trick.

Here's a modified code snippet:

Also, modified the condition inside CCExp method to give error only when both month and year have been selected.

$('#billmanagementform').validate({
  rules: {
    cardExpYear: {
      CCExp: {
        month: '#cc-exp-month',
        year: '#cc-exp-year'
      }
    }
  }
});

$.validator.addMethod('CCExp', function(value, element, params) {
  var minMonth = new Date().getMonth() + 1;
  var minYear = new Date().getFullYear();
  var month = parseInt($(params.month).val(), 10);
  var year = parseInt($(params.year).val(), 10);

  return (!month || !year || year > minYear || (year === minYear && month >= minMonth));
}, 'Your Credit Card Expiration date is invalid.');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<form id="billmanagementform">
  <div class="col-sm-2 col-md-2 col-xs-4">
    <select name="cardExpYear" id="cc-exp-month" class="wide100 required">
      <option value="" selected="selected">Month</option>
      <option value="01">01</option>
      <option value="02">02</option>
      <option value="03">03</option>
      <option value="04">04</option>
      <option value="05">05</option>
      <option value="06">06</option>
      <option value="07">07</option>
      <option value="08">08</option>
      <option value="09">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
  </div>
  <div class="col-sm-4 col-md-4 col-xs-8">
    <select name="cardExpYear" id="cc-exp-year" class="wide100 required">
      <option value="" selected="selected">Year</option>
      <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>
      <option value="2021">2021</option>
      <option value="2022">2022</option>
      <option value="2023">2023</option>
      <option value="2024">2024</option>
      <option value="2025">2025</option>
    </select>
  </div>
  <input type="submit" />
</form>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download