JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form action="">
    <select required="required" id="creditCardExpirationMonth">
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <select required="required" id="creditCardExpirationYear" data-rule-ccdate="true" data-msg-ccdate="Datum nich ok...">
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</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>
    </select>
    <button type="submit">senden</button>
</form>

CSS

.valid {
    border:1px solid green
}
.error {
    border:1px solid red
}

JavaScript

$.validator.addMethod('ccdate', function (value) {
    var testDate = new Date();
    var currentYear = testDate.getFullYear();
    var currentMonth = testDate.getMonth() + 1;
    var compareField = $('#creditCardExpirationMonth');
    console.log($(this), compareField, currentMonth, currentYear, value);
    //console.log(currentYear < value, compareField < currentMonth);

    if (parseInt(compareField.val(), 10) >= currentMonth) {
        //if selected month is >= current month everything is fine
        console.log('alles ok');
        return true;
    } else {
        //else we have to test if the selected year >= current year
        console.log('Achtung, Jahr prüfen');
        return value > currentYear;
    }
});

$('form').validate({
    onfocusout: function (element) {
        //validate each element on focus out
        $(element).valid();
    }
});

$('button').on('click', function (e) {
    e.preventDefault();
});