Problem with next button on registration form using bootstrap - html

Question

I needed when my all mandatory input field filled then only following form come by clicking on the Next button.
But in this code, it is going to next whenever I click on next but only submit when all fields filled.
Which may confuse the users when they forget to input filed then go to next form then not able to submit.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--Added by online for Register-->
<nav>
<button data-toggle="modal" data-target="#myModal2" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Register</b></button>
<div class="modal fade bs-example-modal-sm" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Register</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="username" class="control-label">Name:</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="email" class="control-label">Email:</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="form-group">
<label for="passward" class="control-label">passward:</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="con-passward" class="control-label">Confirm passward:</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<!------------------------------------------------------------------------------->
<button data-toggle="modal" data-target="#myModal3" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Next</b></button>
<div class="modal fade bs-example-modal-sm" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Next Form</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="age" class="control-label">Age:</label>
<input type="number" class="form-control" id="age" required>
</div>
<div class="form-group">
<label for="add" class="control-label">Address:</label>
<input type="text" class="form-control" id="add" required>
</div>
<div class="form-group">
<label for="con" class="control-label">Contact:</label>
<input type="text" class="form-control" id="con" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" value="submit">Submit</button>
<!--button type="button" class="btn btn-danger" data-dismiss="modal">Close</button-->
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------------------>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Answer 1

Simply add an id around your first few inputs and then check if they're empty or not.
$('#next').on('click', function(evt) {
$('#firstModal input:required').each(function() {
if ($(this).val() === '') evt.stopPropagation();
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--Added by online for Register-->
<nav>
<button data-toggle="modal" data-target="#myModal2" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Register</b></button>
<div class="modal fade bs-example-modal-sm" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Register</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form name="reg-form">
<div id="firstModal">
<div class="form-group">
<label for="username" class="control-label">Name:</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="email" class="control-label">Email:</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="form-group">
<label for="passward" class="control-label">passward:</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="con-passward" class="control-label">Confirm passward:</label>
<input type="password" class="form-control" id="password_validate" required>
</div>
</div>
<div class="form-group">
<!------------------------------------------------------------------------------->
<button data-toggle="modal" data-target="#myModal3" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit" id="next"><b>Next</b></button>
<div class="modal fade bs-example-modal-sm" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Next Form</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="age" class="control-label">Age:</label>
<input type="number" class="form-control" id="age" required>
</div>
<div class="form-group">
<label for="add" class="control-label">Address:</label>
<input type="text" class="form-control" id="add" required>
</div>
<div class="form-group">
<label for="con" class="control-label">Contact:</label>
<input type="text" class="form-control" id="con" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" value="submit">Submit</button>
<!--button type="button" class="btn btn-danger" data-dismiss="modal">Close</button-->
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------------------>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>