I have been attempting to design a multi-form and have been struggling to add input validation. Specifically, I want to prevent the form from progressing to the next step if certain fields (such as name) are left empty. However, despite multiple attempts, I have not been able to achieve the desired results or display error messages. This has led me to seek guidance on how to implement validation for name, email, and password in my multi-form setup. For instance, upon clicking the next button, I require input validation for email using the regex pattern ^[\w\d._-]+@[\w\d.-]+\.[\w\d]{2,6}$ and for password using ((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{8,15}). If the input does not meet these requirements, the system should display messages indicating that either the email format or the password format is incorrect. Below is the script I am currently working with:
$(document).ready(function(){
$(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
if(currentSectionIndex === 2){
$(document).find(".form-wrapper .section").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
<!-- remaining stylesheet code unchanged -->
</body>
</html>