JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<form id="myform">
    <div id="signup-part-1">
        PART 1<br>
        <input type="text" name="field1">
        <br>
        
       <button type="button" class="btn-primary pull-right" id="next-btn">Next</button>
   </div>
    
    <div id="signup-part-2">
        PART 2<br>
        <input type="submit">
    </div>
</form>

CSS

#signup-part-2{
	display: none;
}

JavaScript

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true
            }
        },
        submitHandler: function (form) {
            alert('valid form submitted');
            return false;
        }
    });

});

$("#next-btn").click(function(){
    $('#signup-part-1').hide();
    $('#signup-part-2').show();
});