JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<form>
    <p id="error-message">&nbsp;</p>
    <input value="I am not empty" type="text" class="required" />
    <input type="text" class="required"/>
    <input type="text" class="required"/>
    <button>submit</button>    
</form>

CSS

p, input {
    border: 1px solid #666;
    margin: 10px;
    padding: 3px;    
}

input + input {
    visibility: hidden;    
}


input + input ~ input {
    display: none;       
}

JavaScript

$("button").click( function(){
    $("form").submit();   
});

$("form").validate({
    ignore: [],  
    errorPlacement: function(error, element) {
        error.appendTo( $('#error-message') )
    },
    invalidHandler: function() {
        console.log( "error" );  
    },
    submitHandler: function( form ) {
        console.log( "no error" );
    }
});