当用户使用jquery输入无效的日期或月份时，下一步按钮将被禁用

Question

I have a input fields of where credit card information is entered. I copy this code from this link Card Js

I want that when user enter less than month or year then next button will be disabled

This is html code where user enter a information of credit card

<div class="row col-sm-12">
<div class="card-js form-group has-label col-sm-8">

  <!-- Card number -->
  <input class="card-number form-control" name="card_number" placeholder="Enter your card number" autocomplete="off" required>

  <!-- Name on card -->
  <input class="name form-control" id="card_holder_name" name="card_holder_name" placeholder="Enter the name on your card" autocomplete="off" required>

  <!-- Card expiry (element that is displayed) -->
  <input class="expiry form-control" autocomplete="off"  required>

  <!-- Card expiry - Month (hidden) -->
  <input  class="expiry-month exp" name="card_exp_month" id="card_exp_month" required>

  <!-- Card expiry - Year (hidden) -->
  <input class="expiry-year exp" name="card_exp_year" id="card_exp_year"  required>

  <!-- Card CVC -->
  <input class="cvc form-control" name="card_cvc" autocomplete="off" required>

</div>
<?php
  $month= date('n');
  $year= date('y');
 ?> 
  <input type="text" name="curr_month" id="curr_month" value="<?php echo $month;?>"/>
  <input type="text" name="curr_year" id="curr_year" value="<?php echo $year;?>"/>
</div>
<div class="pull-right">
<input type='button' class='btn btn-next btn-fill btn-rose btn-wd' name='next' value='Next' id="billing_nxtBtn"/>
</div>

This is cardjs code link where all working in input fields

I am trying like this

$(".exp").on('input', function() {
var exp_month = $("#card_exp_month").val();
var exp_year = $("#card_exp_year").val();

var curr_month = $("#curr_month").val();
var curr_year = $("#curr_year").val();

 $("#billing_nxtBtn").prop('disabled', exp_year < curr_year || (exp_year == curr_year && exp_month < curr_month));
 });

Answer 1

Your condition is invalid, you should add not to your condition.

Here's working code -

 $(".exp").on('input', function() { var exp_month = Number($("#card_exp_month").val()); var exp_year = Number($("#card_exp_year").val()); var curr_month = Number($("#curr_month").val()); var curr_year = Number($("#curr_year").val()); $("#billing_nxtBtn").prop('disabled', !(exp_year > curr_year || (exp_year == curr_year && exp_month > curr_month))); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://github.com/CardJs/CardJs/blob/master/card-js.min.js"></script> <div class="row col-sm-12"> <div class="card-js form-group has-label col-sm-8"> <!-- Card number --> <input class="card-number form-control" name="card_number" placeholder="Enter your card number" autocomplete="off" required> <!-- Name on card --> <input class="name form-control" id="card_holder_name" name="card_holder_name" placeholder="Enter the name on your card" autocomplete="off" required> <!-- Card expiry (element that is displayed) --> <input class="expiry form-control" autocomplete="off" required> <!-- Card expiry - Month (hidden) --> <input class="expiry-month exp" name="card_exp_month" placeholder="exp month" id="card_exp_month" required> <!-- Card expiry - Year (hidden) --> <input class="expiry-year exp" name="card_exp_year" placeholder="exp year" id="card_exp_year" required> <!-- Card CVC --> <input class="cvc form-control" name="card_cvc" placeholder="cvv" autocomplete="off" required> </div> <input type="text" name="curr_month" placeholder="current month" class="exp" id="curr_month" /> <input type="text" name="curr_year" placeholder="current year" class="exp" id="curr_year"" /> </div> <div class="pull-right"> <input type='button' class='btn btn-next btn-fill btn-rose btn-wd' name='next' value='Next' id="billing_nxtBtn" /> </div>