I came across a multistep form creation tutorial on w3schools. However, the tutorial only covers generic validation (checking if a field is empty), which is not sufficient for my needs. How can I implement HTML validation (e.g., min, max, length) for text and email fields? Is there a way to customize the validation process without having to write validation for each individual field, considering the form contains many fields?
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Personal</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="./css/all.css" rel="stylesheet" type="text/css" />
<link href="./css/personal.css" rel="stylesheet" type="text/css" />
<style>
</style>
</head>
<body>
<main>
<div class="container py-5">
<form id="students-registration" class="jumbotron">
<div class="tab">
<h2 class="lead text-center">Demographic Information</h2>
<div class="form-row">
<div class="form-group col">
<input type="text" class="form-control form-control-sm" placeholder="Surname">
</div>
<div class="form-group col">
<input type="text" class="form-control form-control-sm" placeholder="First name">
</div>
<div class="form-group col">
<input type="text" class="form-control form-control-sm" placeholder="Middle name">
</div>
</div>
</div>
<div class="tab">
<h2 class="lead text-center">Medicals</h2>
<div class="form-row col-md-4 pl-0 pb-1">
<label for="">How would you rate your health</label>
<select class="form-control form-control-sm" name="" id="">
<option value="Good">Good</option>
<option value="Fair">Fair</option>
<option value="Poor">Poor</option>
</select>
</div>
</div>
<div style="overflow:auto;">
<div style="float:right;" class="p-2">
<button type="button" class="btn btn-sm btn-info" id="prevBtn">Previous</button>
<button type="button" class="btn btn-sm btn-success" id="nextBtn">Next</button>
</div>
</div>
<!-- Circles indicating the steps of the form: -->
<div style="text-align:center; margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
</div>
</main>
<footer>
</footer>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/scripts.js"></script>
</body>
</html>
scripts.js
// JavaScript code for form validation and navigation
// Function to display the current tab
// Function to navigate to the next or previous tab
Is there a way to prevent the form from progressing to the next step unless the current step is valid?