当用户使用 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>