HtmlJqueryJqueryUi

Jquery Step Form Working Example With Validations

Jquery Step Form Working Example With Validations

Views

Hello, welcome to therichpost.com. In this post, I will tell you, How to make Jquery Step Form Working Example With Validations? I personally like jquery very much. Most of my code is full with jquery. When I stuck in php or other language then that stuckness I remove with jquery code.
I made this simple form for personal practice and hope this will helpful.

Here is the working code images:

Step1:

Step2:

Step3:

Here is the working code for Jquery Step Form Working Example With Validations:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=”stylesheet” href=”/resources/demos/style.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
<script>
$(document).ready(function(){
$(“#arrivaldate” ).datepicker();
$(“#showerdate” ).datepicker();
$(“#submit_step1”).click(function(e){
e.preventDefault();
var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if($(“#newEmail”).val()==”” || !regex.test($(“#newEmail”).val()))
{
$(“#newEmail”).css(“border”, “2px solid red”);
}
else
{
$(“#newEmail”).css(“border”, “2px solid #b2dcf3”);
$(“#step1”).hide();
$(“#step2”).show();
}

});
$(“#submit_step2”).click(function(e){
e.preventDefault();
var a=0;
var b=0;
var c=0;
var d=0;
if($(“#firstname”).val()==””)
{
a=1;
$(“#firstname”).css(“border”, “2px solid red”);
}
else
{
a=0;
$(“#firstname”).css(“border”, “2px solid #b2dcf3”);
}
if($(“#lastname”).val()==””)
{
b=1;
$(“#lastname”).css(“border”, “2px solid red”);
}
else
{
b=0;
$(“#lastname”).css(“border”, “2px solid #b2dcf3”);
}
if($(“#password”).val()==””)
{
c=1;
$(“#password”).css(“border”, “2px solid red”);
}
else
{
c=0;
$(“#password”).css(“border”, “2px solid #b2dcf3”);
}
if($(“#confirmpassword”).val()==””||$(“#confirmpassword”).val()!= $(“#password”).val())
{
d=1;
$(“#confirmpassword”).css(“border”, “2px solid red”);
}
else
{
d=0;
$(“#confirmpassword”).css(“border”, “2px solid #b2dcf3”);
}
if(a==”1″||b==”1″||c==”1″||d==”1″)
{

}
else
{
$(“#step2”).hide();
$(“#step3”).show();
}
});

$(“#submit_step3”).click(function(e){
e.preventDefault();

if($(“#arrivaldate”).val()==””)
{
$(“#arrivaldate”).css(“border”, “2px solid red”);
}

else
{
$(“#arrivaldate”).css(“border”, “2px solid #b2dcf3”);
$(“#step3”).hide();
alert(“done”);

}
});
});
</script>
<div class=”entry-content”>
<form method=”post” id=”form”>
<!—-Step1——>
<div id=”step1″>
<h3>new customers</h3>
<h4>Create Account</h4>
<div class=”input”>
<div class=”label”><label>Email<span class=”required”>*</span></label></div>
<div class=”text”><input id=”newEmail” name=”email” class=”inputtext” type=”text”></div></div>
<div class=”buttondiv”><input type=”submit” name=”submit” value=”Create Account” id=”submit_step1″></div>
</div>
<!—-Step1——>
<!—-Step2——>
<div id=”step2″ style=”display:none;”>
<h3>Registration</h3>
<div class=”input”>
<div class=”label”><label>First Name <span class=”required”>*</span></label></div>
<div class=”text”><input id=”firstname” name=”firstname” class=”inputtext” type=”text”></div></div>
<div class=”input”>
<div class=”label”><label>Last Name <span class=”required”>*</span></label></div>
<div class=”text”><input id=”lastname” name=”lastname” class=”inputtext” type=”text”></div></div>
<div class=”input”>
<div class=”label”><label>Primary Phone </label></div>
<div class=”text”><input id=”primaryphone” name=”primaryphone” class=”inputtext” type=”text”></div></div>
<div class=”input”>
<div class=”label”><label>Mobile Number </label></div>
<div class=”text”><input id=”mobilenumber” name=”mobilenumber” class=”inputtext” type=”text”></div></div>
<div class=”input”>
<div class=”label”><label>Password <span class=”required”>*</span></label></div>
<div class=”text”><input id=”password” name=”password” class=”inputtext” type=”password”></div></div>
<div class=”input”>
<div class=”label”><label>Confirm Password <span class=”required”>*</span></label></div>
<div class=”text”><input id=”confirmpassword” name=”confirmpassword” class=”inputtext” type=”password”></div></div>
<div class=”buttondiv”><input type=”submit” name=”submit” value=”Create Account” id=”submit_step2″></div>
</div>
<!—-Step2——>
<!—-Step3——>
<div id=”step3″ style=”display:none;”>
<h3>Create Baby Registry</h3>
<div class=”input”>
<div class=”label”><label>Baby’s Expected Arrival Date <span class=”required”>*</span></label></div>
<div class=”text”><input id=”arrivaldate” name=”arrivaldate” class=”inputtext” type=”text”></div></div>
<div class=”input”>
<div class=”label”><label>Shower Date </label></div>
<div class=”text”><input id=”showerdate” name=”showerdate” class=”inputtext” type=”text”></div></div>
<div class=”input”>
<div class=”label”><label>Baby Gender </label></div>
<div class=”select”>
<select id=”selectbabygender”>
<option value=””>Select Baby Gender</option>
<option value=”1″>It’s a boy!</option>
<option value=”2″>It’s a girl!</option>
<option value=”3″>It’s multiples!</option>
<option value=”4″>It’s a surprise!</option>
</select>
</div>
</div>
<div class=”input”>
<div class=”label”><label>Baby Name </label></div>
<div class=”text”><input id=”babyname” name=”babyname” class=”inputtext” type=”text”></div></div>
<div class=”input”>
<div class=”label”><label>Nursery Décor or Theme </label></div>
<div class=”text”>
<textarea id=”themetext”></textarea>
</div></div>
<div class=”buttondiv”><input type=”submit” name=”submit” value=”Submit” id=”submit_step3″></div>
</div>
<!—-Step3——>
</form>
</div>

There are so many jquery code, tricks and i will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

2 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Positive SSL