I have a straight forward form sprinkled with a bit of jQuery, but I have a small issue. When I hit Next button it goes to the next step without popping up the small field with "you have to complete this required field". How can I force the next button to do this action as the submit button does it by default? If someone could show me an elegant way to adapt this to my curent code I would apreeciate it a lot :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
#regiration_form fieldset:not(:first-of-type) {
display: none;
}
</style>
<title>Form</title>
</head>
<body>
<div class="container">
<h1></h1>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<form id="regiration_form" action="action.php" method="post">
<fieldset>
<h2>Step 1: Create your account</h2>
<div class="form-group">
<label for="email">Email addresss</label>
<input type="email" class="form-control" id="email" name="data[email]" placeholder="Email" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
<input type="button" name="data[password]" class="next btn btn-info" value="Next" />
</fieldset>
<fieldset>
<h2> Step 2: Add Personnel Details</h2>
<div class="form-group">
<label for="NameA">First Name</label>
<input type="text" class="form-control" name="data[NameA]" id="NameA" placeholder="First Name" required>
</div>
<div class="form-group">
<label for="NameB">Last Name</label>
<input type="text" class="form-control" name="data[NameB]" id="NameB" placeholder="Last Name" required>
</div>
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="button" name="next" class="next btn btn-info" value="Next" />
</fieldset>
<fieldset>
<h2>Step 3: Contact Information</h2>
<div class="form-group">
<label for="mob">Mobile Number</label>
<input type="text" class="form-control" id="mob" name="data[mob]" placeholder="Mobile Number" required>
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" name="data[address]" placeholder="Communication Address" required></textarea>
</div>
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="submit" name="submit" class="submit btn btn-success" value="Submit" id="submit_data" />
</fieldset>
</form>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var current = 1,current_step,next_step,steps;
steps = $("fieldset").length;
$(".next").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
setProgressBar(++current);
});
$(".previous").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().prev();
next_step.show();
current_step.hide();
setProgressBar(--current);
});
setProgressBar(current);
// Change progress bar action
function setProgressBar(curStep){
var percent = parseFloat(100 / steps) * curStep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}
});
</script>