jquery Multiple step form validation

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:

  1.   Laravel Autocomplete Textbox with Multiple values using jQuery and MySQL
  2.   Select DropDown Option Selected In Laravel
  3.   JavaScript Redirect URL Example
  4.   Dynamically addClass CSS click using jQuery
  5.   javascript split string by comma
  6.   jquery replace newline with br Example - Convert new lines to br - nl2br function
  7.   How to add Ajax loader image in PHP?
  8.   Bootstrap Toggle switch example
  9.   JavaScript Arrays & objects Tips, tricks and examples
  10.   Custom Alert and Confirm Dialog Box using jQuery and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *