JSFiddle - React, Tailwind, and code Playground

by godhong

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<form id="form1"><table><tr class = "app_dates"><th><label for = "id_Date_apt"> Application Date 1 (MM/DD): </label></th> <td> <input id = "id_Date_apt" type = "text" value = "01/11" name = "Date_apt"/></td></tr>
<tr class = "app_dates"><th><label for = "id_Date_apt"> Application Date 2 (MM/DD): </label></th> <td> <input id = "id_Date_apt2" type = "text" value = "12/12" name = "Date_apt2"/></td></tr>
<tr class = "app_dates"><th><label for = "id_Date_apt"> Application Date 3 (MM/DD): </label></th> <td> <input id = "id_Date_apt3" type = "text" value = "03/13" name = "Date_apt3"/></td></tr>
<tr><td><input type="submit" value="Submit"><input type="reset" value="Reset"></td></tr></table></form>

JavaScript

$(document).ready(function() {
    //create a function used compare the sequence of input values
    function isDate() {
    var siz = $('input[id^="id_Date_"]').size()
    date = []
    temp_f = 0
    // this for loop compares the secquences of application dates in pairs    
    for (var i = 0; i < siz - 1; i++) {
        j = i + 1
        var date1_m = parseFloat($('input[id^="id_Date_apt"]:eq(' + i + ')').val().slice(0, 2))
        var date2_m = parseFloat($('input[id^="id_Date_apt"]:eq(' + j + ')').val().slice(0, 2))
        var date1_d = parseFloat($('input[id^="id_Date_apt"]:eq(' + i + ')').val().slice(3, 5))
        var date2_d = parseFloat($('input[id^="id_Date_apt"]:eq(' + j + ')').val().slice(3, 5))
        var date1_full = new Date(1960, date1_m - 01, date1_d)
        var date2_full = new Date(1960, date2_m - 01, date2_d)

        if (date1_full > date2_full) {
            temp = 0
        }
        else {
            temp = 1
        }
        temp_f = temp_f + temp
    } //end of for loop
        
    if (temp_f != siz-1) {
        return false;
    }
    else {
        return true;
    }
}

//validation////
$.validator.addMethod("dateFormat", function(value, element) {
    return isDate();
}, "Inputs are not in sequence");

$("#form1").validate({
    submitHandler: function(form) {
        SubmittingForm()
    },
    rules: {
        //should I add the new validation rule for Date_apt2 and Date_apt3??    
        Date_apt: {
            dateFormat: true
        }
    }
})

})