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 = "11/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 = "02/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(i) {
    //create a function used compare the sequence of input values

    function isDate(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) {
            return false
        }
        else {
            return true
        }
    }


    $.validator.addMethod("dateFormat1", function(value, element) {
        return isDate(0);
    }, "Inputs 1 and 2 are not in sequence");
    
    $.validator.addMethod("dateFormat2", function(value, element) {
        return isDate(1);
    }, "Inputs 2 and 3 are not in sequence");    
    
    $("#form1").validate({
       submitHandler: function(form) {
           SubmittingForm()
       },
        rules: {
           Date_apt: {
               dateFormat1: true
           },
           Date_apt2: {
               dateFormat2: true
           }               
        }
    })
})