i want to display error message in my multiple step form in jquery

Question

I want to display an error message in my multiple step form in jquery if I click on next button with out filling any value it should gives error message as soon as enter value error message disappear.if i click on next bttton with out filling any value it should gives error message as soon as enter value error message disappear

 function isEmail(str) { // simple email validation return /(.+)@(.+){2,}\\.(.+){2,}/.test($.trim(str)); } function isEmpty(str) { // test for empty string return $.trim(str) === ""; } function validate($div) { // validates any div - will not let you leave the div if error var $fields = $div.find("input"), hasError = false; $fields.each(function() { $(this).removeClass("error") hasError = this.name=="pword" && isEmpty(this.value); if (hasError) { $("#pword").addClass("error").focus(); return false; } hasError = this.name=="email" && (isEmpty(this.value) || !isEmail(this.value)); if (hasError) { $("#email").addClass("error").focus(); return false; } hasError = isEmpty(this.value); // the rest of the fields if (hasError) { $(this).addClass("error").focus(); return false; } }) return hasError?false:true; } $(function() { // validate all divs on submit, but actually only necessary to validate thediv the submit is on $("#myForm").on("submit",function(e) { $(".page").each(function() { if (!validate($(this))) { e.preventDefault(); // stop submission return false; } }); }); $(".nav").on("click", function() { var $parent = $(this).closest("div"); var $nextDiv = $(this).hasClass("next") ? $parent.next() : $parent.prev(); if (validate($parent)) { // is the div this button is on valid? $parent.fadeOut(function() { // fade it out and fade the next one in if ($nextDiv.length) { $nextDiv.fadeIn() for (var i=$(".page").length;i> $nextDiv.index(); i--) { $("#bar" + i).css({"background-color": "#D8D8D8"}); // we are going backwards } $("#bar" + $nextDiv.index()).css({"background-color": "#38610B"}); } }); } }); }); 

 body { margin: 0 auto; padding: 0; text-align: center; background-color: #D8D8D8; } #wrapper { width: 995px; padding: 0px; margin: 0px auto; font-family: helvetica; position: relative; } #wrapper .baricon { display: inline-block; border-radius: 100%; padding: 12px; background-color: #38610B; color: white; } #wrapper .progress_bar { width: 200px; height: 5px; border-radius: 20px; background-color: #D8D8D8; display: inline-block; } #wrapper form div { margin-left: 340px; padding: 10px; box-sizing: border-box; width: 300px; margin-top: 50px; background-color: #585858; } #wrapper form div p { color: #F2F2F2; margin: 0px; margin-top: 10px; font-weight: bold; } #wrapper form div .form_head { font-size: 22px; font-weight: bold; margin-bottom: 30px; } #wrapper form div input[type="text"] { width: 200px; height: 40px; padding: 5px; border-radius: 5px; border: none; margin-top: 10px; } #wrapper form div input[type="button"], input[type="submit"] { width: 80px; height: 40px; border-radius: 5px; border: 2px solid white; background: none; color: white; margin: 5px; margin-top: 10px; } #user_details, #qualification { display: none; } .error { background-color:pink !important} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="wrapper"> <br> <span class='baricon'>1</span> <span id="bar1" class='progress_bar'> </span> <span class='baricon'>2</span> <span id="bar2" class='progress_bar'> </span> <span class='baricon'>3</span> <form method="post" action="" id="myForm"> <div id="account_details" class="page"> <p class='form_head'>Account Details</p> <p>Email Address</p> <input type="text" name="email" id="email" placeholder='Email Address'> <p>Password</p> <input type="text" name="pword" id="pword" placeholder='Password'> <br> <input type="button" value="Next" class="nav next" /> </div> <div id="user_details" class="page"> <p class='form_head'>User Details</p> <p>First Name</p> <input type="text" name="fname" id="fname" placeholder='First Name'> <p>Last Name</p> <input type="text" name="lname" is="lname" placeholder='Last Name'> <p>Gender</p> <input type="text" name="gender" id="gender" placeholder='Gender'> <br> <input type="button" value="Prev" class="nav prev" /> <input type="button" value="Next" class="nav next" /> </div> <div id="qualification" class="page"> <p class='form_head'>Qualification</p> <p>Qualification</p> <input type="text" placeholder='Qualification'> <p>Hobbies</p> <input type="text" placeholder='Hobbies'> <br> <input type="button" value="Prev" class="nav prev" /> <input type="Submit" value="Submit"> </div> </form> </div> 

Answer 1

You can use jQuery Steps plugin for these multiple steps form. This will be very easy to handle.