JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>
<form id="myform">
    <input type="text" name="field1" />
    <br/>
    <input type="text" name="field2" />
    <br/>
    <input type="text" name="field3" />
    <br/>
    <input type="text" name="field4" />
    <br/>
    <input type="button" id="button1" value="Save" />
    <input type="button" id="button2" value="Submit" />
</form>

CSS

input {
    margin: 20px;
}
#docs {
    display: block;
    position: absolute;
    bottom: 0;
}

JavaScript

$(document).ready(function () {

    $("#myform").validate({
        rules: {
            field1: {
                required: true
            },
            field2: {
                required: true
            }
        },
        submitHandler: function (form) { // for demo	
            alert("data saved");
        }
    });


    $('#button1').click(function () {
        $('[name="field3"], [name="field4"]').each(function () {
            $(this).rules('remove');
        });
        $("#myform").valid();  // validation test only
    });

    $('#button2').click(function () {
        $('[name="field3"], [name="field4"]').each(function () {
            $(this).rules('add', {
                required: true
            });
        });
        $("#myform").submit();  // validate and submit
    });

});