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>
Related FAQ
Here are some more FAQ related to this Article: