Следующая кнопка будет отключена, когда пользователь введет неверную дату или месяц, используя jquery

Question

У меня есть поля для ввода информации о кредитной карте.Я копирую этот код по этой ссылке Карта Js

Я хочу, чтобы при вводе пользователем менее месяца или года следующая кнопка была отключена

Это HTML-код, где пользовательвведите данные кредитной карты

<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>

Это код Cardjs ссылка , где все работают в полях ввода

Я пытаюсь вот так

$(".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

Ваше условие недействительно, вы должны добавить not к вашему условию.

Вот рабочий код -

$(".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>