JSFiddle - React, Tailwind, and code Playground

by bRIMOs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>

<form role="form" id="checkin" name="checkin" method="post"> 

<label for="dedicatalog"> Dedication Text: </label> <input type="text" name="dedicatalog" id="dedicatalog" size="20" placeholder="Dedication" />

<label for="schedule"> Date: </label> <input id="schedule" name="schedule" placeholder="M-D-YY"/> 

<input type="submit" id="submit" class="btn btn-default" value="Check In Now" disabled />

</form>

JavaScript

jQuery.validator.addMethod("dateFormat", function(value, element) {
    console.log(value,/^(0?[1-9]|1[0-2])\/(0?[1-9]|1[0-9]|2[0-9]|3[01])\/\d{2}$/.test(value));
    return /^(0?[1-9]|1[0-2])\/(0?[1-9]|1[0-9]|2[0-9]|3[01])\/\d{2}$/.test(value);
}, "Invalid Date !");

$(function() {
    $('#checkin').validate(
    {
      rules:{
        
        schedule: {
          required:true,
          dateFormat: true,
        }
      },
      messages:{
         required:"Required Field !"
      }
    });
    
        $('#checkin input').on('keyup blur', function (e) { // fires on every keyup & blur
            
            if ($('#checkin').valid()) {
              $('#submit').attr('disabled', false);
            }
            else {
              $('#submit').attr('disabled', true);
            }
        });
});