Disabled a button based on credit date expiry date validation in jquery - php

Question

I have fields of credit card expiry date.Below code user enter a month and year
<input class="expiry-month exp" name="card_exp_month" id="card_exp_month" required>
<input class="expiry-year exp" name="card_exp_year" id="card_exp_year" required>
I am getting current month and year from php date() function.
<?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;?>"/>
This button will be disabled when user enter a expiry month or year less to current month or year
<input type='button' class='btn btn-next btn-fill btn-rose btn-wd' name='next' value='Next' id="billing_nxtBtn" />
and jquery code
$( ".exp" ).keyup(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();
if(exp_month < curr_month || exp_year < curr_year){
$("#billing_nxtBtn").attr("disabled",true);
}else if(exp_month > curr_month || exp_year > curr_year) {
$("#billing_nxtBtn").attr("disabled",false);
}
});
I want that when user enter a expire month or year less then to current month or year then button will be disabled and when user enter a expire month or year greater then to current month or year then button will be enabled.
Issue is that button is not disbaled when user enter a expire month or year less then to current month or year

Answer 1

There's a couple of issues. One is because you're not removing the disabled attribute; you need to use removeAttr(). Your logic is also flawed, as if I selected 01/2019 then the button would be disabled as the month is less than the current month - you're not taking in to account years.
There is also a couple of logical improvements you can make, such as using input instead of keyup (in case people copy+paste values, or use other entry methods for accessibility) and use prop() instead of attr(). That way you can simply provide the boolean condition as the argument.
Also just FYI, this is not secure in the slightest; it's ridiculously easy to break. You should provide this client side validation as a courtesy to users only and do the business critical date check on the server side.
With all that said, try 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() || 0;
var curr_year = $("#curr_year").val() || 0;
$("#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/3.3.1/jquery.min.js"></script>
<input class="expiry-month exp" name="card_exp_month" id="card_exp_month" required>
<input class="expiry-year exp" name="card_exp_year" id="card_exp_year" required><br />
<input type="text" name="curr_month" id="curr_month" value="6" />
<input type="text" name="curr_year" id="curr_year" value="18" />
<input type='button' class='btn btn-next btn-fill btn-rose btn-wd' name='next' value='Next' id="billing_nxtBtn" disabled/>

Answer 2

You should place your jquery constant value with PHP constant date, not get it from input field (which is dynamic value by user input), example code as below:
$( ".exp" ).keyup(function() {
var exp_month = $("#card_exp_month").val();
var exp_year = $("#card_exp_year").val();
var curr_month = parseInt('<?= date("n");?>');
var curr_year = parseInt('<?= date("Y");?>');
if (exp_year < curr_year) {
$("#billing_nxtBtn").attr("disabled", true);
} else if (exp_year > curr_year) {
$("#billing_nxtBtn").removeAttr("disabled");
} else {
if (exp_month >= curr_month) {
$("#billing_nxtBtn").removeAttr("disabled");
} else {
$("#billing_nxtBtn").attr("disabled", true);
}
}
});

Answer 3

Have u try to use Jquery.change Method
$("#card_exp_month,#card_exp_year").change(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();
if(exp_month < curr_month || exp_year < curr_year){
$("#billing_nxtBtn").attr("disabled",true);
}else if(exp_month > curr_month || exp_year > curr_year) {
$("#billing_nxtBtn").attr("disabled",false);
}
});