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="submit" id="button1" value="Save" />
    <input type="submit" id="button2" value="Submit" />
</form>

CSS

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

JavaScript

$(document).ready(function () {
     $('#button1').click(function(){			 
				$("#myform").validate({				
					rules: {
                        field1: {
                            required: true                         
                        },
                        field2: {
                            required: true                        
                        }
					},
					submitHandler: function (form) { // for demo	
                        alert("data saved");
					
					}
					
				});
			});	
			
			
			 $('#button2').click(function(){
			
				$("#myform").validate({				
					rules: {
                        field1: {
                            required: true                          
                        },
                        field2: {
                            required: true                           
                        },
					  field3: {
                            required: true                         
                        },
                        field4: {
                            required: true                          
                        }
				
					},
                    submitHandler: function (form) { // for demo
				         alert("data submited");
					}
					
				});
			});
});