JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   <div class="tab-content">
		<form class="form-horizontal" onsubmit="return false;" action="" method="post" id="myform">
    
		<div id="stepusername">
				
				<p>This is step 1</p>
      		
       			<input type="text" class="form-control" id="username" name="username" placeholder="Username"><br>
      			
      			<p><a class="btn btn-primary next">Go to step 2</a></p>  
      			          
     	</div><!-- signup_one ends -->
     	
     	<div id="stepemail">

				<p>This is step 2</p>
				     	
      			<input type="email" class="form-control" id="email" name="email" placeholder="email"><br>
     			
      			<input class="btn btn-success" type="submit" value="Finish">
						
     	</div><!-- step2 ends -->
     	
		</form>
		
		<div id="stepsuccess">
		
		<p class="green">Leave username input empty and Click "Go to step 2". It will not send anything to database.</p><p class="red">After just press "Enter" and even though it will give you error "Username required" it's send empty data to database. Try.</p>
		
		</div><!-- success ends -->
		
		
    </div><!-- tab-content ends -->

CSS

.tab-content {
    width: 250px;
    margin: 25px;
}

#stepemail {
    display:none;
}

#stepsuccess{
    
}

.green { color: green }
.red { color: red }

JavaScript

// this script makes pressing Enter gives error. But empty data still goes to database.
	   $('.form-horizontal').keypress(function (event) {
    		if (event.which === 13) {
        	$(".next").trigger('click');
    		}
			});

		// Let's act like we send to database.
			$(function(){
				$('input[type=submit]').click(function(){
					$.ajax({
						type: "POST",
						url: "sent.php",
						data: $("#myform").serialize(),
						beforeSend: function(){
							$('#stepsuccess').html('Sent to the database. Strange.');				
						},
						success: function(data){
							$('#stepsuccess').html(data);
				
						}
					});
				});
			});

		// jQuery.validate script, does client-side validation
		$(document).ready(function(){


			$(".next").click(function(){
				var form = $("#myform");
				form.validate({
					errorElement: 'div',
					errorClass: 'formerror',
					highlight: function(element, errorClass, validClass) {
						$(element).closest('.form-group').addClass("has-error");
					},
					unhighlight: function(element, errorClass, validClass) {
						$(element).closest('.form-group').removeClass("has-error");
					},
					rules: {
						username: {
							required: true,
							minlength: 1,
						},
						email: {
							required: true,
							minlength: 3,
						},
						
					},
					messages: {
						username: {
							required: "Username required",
						},
						email: {
							required: "Email required",
						},														
					}
				});
				if (form.valid() === true){
					if ($('#stepusername').is(":visible")){
						current_fs = $('#stepusername');
						next_fs = $('#stepemail');
					}else if($('#stepemail').is(":visible")){
						current_fs = $('#stepemail');
						next_fs = $('#stepsuccess');
					}
					
					next_fs.show(); 
					current_fs.hide();
				}
			});
			
		});