JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form id="myform">
    <input type="text" name="field1" />
    <br/>
    <br />
    <input type="text" id="toggleInput" name="toggleInputName" style="display:none" />
    <input type="button" id="toggleButton" value="Toggle Disabled" />
    <input type="submit" />
</form>

JavaScript

$(document).ready(function () {

    $('#myform').validate({
        onblur: true,
        ignore: ":disabled",
        rules: {
            field1: {
                required: true,
                minlength: 5
            },
            field2: {
                required: true,
                minlength: 5
            },
            toggleInputName: {
                required: true,
                minlength: 5
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form');
            return false;
        }
    });

});
(function ($) {
    $.fn.toggleDisabled = function () {
        return this.each(function () {
            var $this = $(this);
            $this.toggle($this.prop('disabled')).prop('disabled', !$this.prop('disabled')) 
        });
    };
})(jQuery);

$(function () {
    $('#toggleButton').click(function () {
        $('#toggleInput').toggleDisabled();
    });
});