jquery Multiple step form validation
Today, We want to share with you jquery Multiple step form validation.
In this post we will show you jQuery Form Validation Tutorial, hear for Quick & Easy Form Validation Tutorial with JQuery we will give you demo and example for implement.
In this post, we will learn about Multiple step form with jQuery validation with an example.
Description:
All HTML Form elements Checks whether the selected form is valid dat or whether all selected elements are valid or not.
The basic principle of this validation is to specify success message ,validation rules and error messages for HTML(form tags) elements in JavaScript with jquery.
There square measure scores of ways that to perform validation on your hypertext mark-up language forms however nothing is simpler than exploitation jQuery’s validation plug-in. I’ll take you thru alittle tutorial to assist you perceive the way to create it work. Let’s take a glance at what you’ll do and the way you’ll customise the inbuilt validation.
Of course as perpetually make certain you reference the most website here beside all the offered validation strategies found here. There also are some sensible tutorials like this one and particularly this one, however I wished to require the layman’s approach right from the start. Let’s come in details of what’s required employing a easy hypertext mark-up language kind example.
HTML-Form Validation with PHP
The HTML Form
HTML-Text Fields
The userlastname,First name, re_address, and emailaddress fields are text input elements and can be coded like this:
Write Name : <input type="text" name="name" value="" placeholder="write Name"> Write Address : <input type="text" name="address" value="" placeholder="write address"> Write Email : <input type="text" name="email" value="" placeholder="write email">
HTML-Radio Buttons
<input type="radio" name="h_many" value="zero" id="doc_maney1"> //0 <input type="radio" name="h_many" value="one" id="doc_maney2"> //1 <input type="radio" name="h_many" value="two" id="doc_maney3"> //2 <input type="radio" name="h_many" value="twoplus" id="doc_maney4"> //More than 2
HTML-Select List
<select name="languahestotal[]" size="4" multiple> <option value="javascript" id="lang1">javascript</option> <option value="Laravel" id="lang2">Laravel</option> <option value="MEANJS" id="lang3">MEANJS</option> <option value="jQuery" id="lang4">jQuery</option> <option value="CSS" id="lang5">CSS</option> <option value="HTML" id="lang6">HTML</option> </select>
HTML-Checkbox
<input type="checkbox" name="Laravel" value="Yes">//select check = yes Laravel <input type="checkbox" name="MEANJS" value="Yes">//select check = yes MEANJS <input type="checkbox" name="Angulaejs" value="Yes">//select check = yes Angulaejs <input type="checkbox" name="HTML" value="Yes">//select check = yes HTML
Form Submit Button
<input type="submit" name="submit_form" value="Submit_Upload">//Button submit
The Form Element POST / GET Method
There are two must used specific attributes used: action and method
<form method="POST" id="form_product" action="product_insert_data.php" class="focus"> ... ...... //Form html elements here... ....... ........ </form>
Retrive the Form Contents using PHP
<input type="submit" name="submit_form_salesorder" value="Submit_Upload">//Button submit
// check php condition
if (isset($_GET["submit_form_salesorder"])) {
//if success....to execute this code
// get all parameters in process the form contents...
///execute your logic.....
}
Example
<html>
<head>
<!-- include Script and css-->
<link href="yourprojectdir/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="yourprojectdir/js/bootstrap.min.js"></script>
<!-- Load jQuery and the validate plugin -->
<script src="yourprojectdir/jquery-1.9.1.js"></script>
<script src="yourprojectdir/1.9/jquery.validate.min.js"></script>
<style>
.label {
width:100px;
text-align:right;
float:left;
padding-right:10px;
font-weight:bold;
}
#register-form label.error {
color:#FB3A3A;
font-weight:bold;
}
h1 {
font-family: Helvetica;
font-weight: 100;
color:#333;
padding-bottom:20px;
}
</style>
<!--HTML Form jQuery Form Validation code -->
<script>
// Browser- When the browser is ready...
$(function() {
// Setup form validation on the #register-form element
$("#register-form").validate({
// Specify the validation rules
rules: {
DebtorName: "required",
Attention: "required",
email_add: {
email_add: true
required: true
},
strong_password: {
required: true,
minlength: 8
},
agree: "required"
},
// all Specify the validation error messages
messages: {
DebtorName: "Please write your DebtorName",
Attention: "Please write your Attention name",
password: {
required: "Please write a uniq or strong password",
minlength: "write password must be at least 8 characters long and strong"
},
email_add: "Please enter a valid email address",
agree: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body class="add_new">
<h1>Sales Order Form Information</h1>
<!-- start form here-->
<!-- Browser side check The form that will be parsed by jQuery before submit data using jQuery -->
<form action="debtor_create.php" method="post" id="register-form">
<div class="label">DebtorName</div><input type="text" id="DebtorName" name="DebtorName" /><br />
<div class="label">Attention Name</div><input type="text" id="Attention" name="Attention" placeholder="Attention" /><br />
<div class="label">write Email(verify) Address</div><input type="text" placeholder="write email address" id="email_add" name="email_add" /><br />
<div class="label">write Strong_Password</div><input type="password" placeholder="write strong pass" id="strong_password" name="strong_password" /><br />
<div style="color:green;margin-left:130px;"><input type="submit" name="submit_order_data" value="Submit_save" /></div>
</form>
<!-- End form here-->
</body>
</html>
jquery multi step form with validation and next previous navigation
Creating a multi-step form with validation and next/previous navigation using jQuery involves the following steps:
HTML: Create an HTML form with multiple sections, each containing the form fields for a single step. For example:
<form id="multi-step-form">
<div class="step-section" id="step-1">
<input type="text" name="name" id="name">
<input type="email" name="email" id="email">
<button type="button" class="next-button">Next</button>
</div>
<div class="step-section" id="step-2">
<input type="text" name="address" id="address">
<input type="text" name="city" id="city">
<button type="button" class="prev-button">Previous</button>
<button type="button" class="next-button">Next</button>
</div>
<div class="step-section" id="step-3">
<input type="text" name="credit_card" id="credit_card">
<input type="text" name="cvv" id="cvv">
<button type="button" class="prev-button">Previous</button>
<button type="submit">Submit</button>
</div>
</form>
CSS: Use CSS to hide all but the first step of the form, and to style the next/previous buttons as needed.
.step-section {
display: none;
}
#step-1 {
display: block;
}
.next-button {
float: right;
}
.prev-button {
float: left;
}
JavaScript: Use jQuery to handle the next/previous button clicks, and to validate the form fields for each step. For example:
$(document).ready(function() {
var current_step = 1;
var steps = $('.step-section').length;
$('.next-button').click(function() {
if (validateStep(current_step)) {
$('#step-' + current_step).hide();
current_step++;
$('#step-' + current_step).show();
}
});
$('.prev-button').click(function() {
$('#step-' + current_step).hide();
current_step--;
$('#step-' + current_step).show();
});
function validateStep(step) {
var is_valid = true;
$('#step-' + step + ' input').each(function() {
if ($(this).val() == '') {
is_valid = false;
$(this).addClass('error');
} else {
$(this).removeClass('error');
}
});
return is_valid;
}
$('#multi-step-form').submit(function() {
if (validateStep(current_step)) {
return true;
} else {
return false;
}
});
});
In the above code, we first set the current_step variable to 1, and the steps variable to the total number of steps in the form.
We then use jQuery to handle the click events of the next/previous buttons. When the user clicks the next button, we first validate the fields in the current step using the validateStep() function. If the fields are valid, we hide the current step section, increment the current_step variable, and show the next step section. If the user clicks the previous button, we hide the current step section, decrement the current_step variable, and show the previous step section.
The validateStep() function checks the form fields for the given step and adds the error class to any fields that are empty.