Form Validation using jQuery plugin

Form validation using jQuery validate.js plugin

 
coding-zon-form-validation-jquery

In this article, you are going to learn how to use a jQuery validate.js plugin to validate HTML form fields.

Before  working on form validations, you need to add these files to your program. One is validate.js  and the other one is core jQuery core library. In this, we are using only CDN links. If you are working in project, then directly download  from here and add to the project. 

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.3/jquery.validate.min.js 

Add the above links in a script. Just copy above link and paste  in  a script tag's src="" attribute.

In this example, just validating name and email. This example gives you how to use plug in and validate form fields.

jQuery's script calling the plugin method validate(). This method taking an array as an  argument, which is having  two array elements, one is rules and messages.

  • rules → defines the rules for form fields, such as require, email, number, min length etc
  • messages →  defines the messages for each rule. When rule not satisfied, a related message will be displayed.

Validating Name, email

Example: 

index.php
 
<html>

<head> 
<title>coding-zon jquery form-validation demo </title>
 
<script src="" ></script>
<script src=""></script>

<script>
 
$(document).ready(function() {

$("#signupForm").validate({ 
 
rules: {
 
       name: "required",
	
	email: {
		required: true,
		email: true,
		},
	},
messages: { 
 
             name: "Please enter your first name",     
	      email: "Please enter a valid email address",
 
    }
}); // validate method end

}); //jQuery method end
 
</script>
 
</head> 

<body> 

<form action="#" method="post" id="signupForm">  

<p> <span>Name :</span> 

<input type="text" placeholder="enter your Name" name="name"/></p>  

 

<p> <span>Email :</span>  

<input type="text" placeholder="enter your email" name="email"/></p>  

 

<input type="submit" name="submit" value="Submit"/>  

 

</form>  

</body>  

</html> 

 

 

 

Adding CSS 

 

Add the given css any where in <head> section.

 
<style>
 
label.error.fail-alert {
 
background: #fffccc;
color: red;
line-height: 1;
}
input.valid.success-alert {
border: 2px solid #4CAF50;
color: green;
}

</style> 
 

 Now add CSS elements class in validate() method  just before rules. As shown in below code snippet.

 
 
 
 
<script>

$(document).ready(function() {

$("#signupForm").validate({

 errorClass: "error fail-alert",
 validClass: "valid success-alert",
rules: {
		name: "required",
		 	 
		email: {
			required: true,
			email: true,
			},
	},

messages: {
        name: "Please enter your firstname",     
        email: "Please enter a valid email address",
}
	});

});
</script> 
 
 
 

Now the program looks as shown below

 


Example:

 

 index.php

 


<html>
<head> 

<title>Coding-zon jQuery form-validation demo </title>

<style>

label.error.fail-alert {

background: #fffccc;
color: red;
line-height: 1;
}
input.valid.success-alert {
border: 2px solid #4CAF50;
color: green;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.3/jquery.validate.min.js"></script>  

<script>

$(document).ready(function() {

$("#signupForm").validate({

errorClass: "error fail-alert",
validClass: "valid success-alert", 
 
rules: {
		name: "required",
	 
 
		email: {
			required: true,
			email: true,
		},
		
},

messages: {
    name: "Please enter your firstname",     
    email: "Please enter a valid email address",
}
});

});
</script>

</head>
<body> 



<form action="#" method="post" id="signupForm">
 
<p> <span>Name :</span>  
<input type="text"  placeholder="enter your  Name" name="name"/></p>
 
<p> <span>Email :</span> 
<input type="text" placeholder="enter your  email" name="email"/></p>

<input type="submit" name="submit"  value="Submit"/>


</form>
 
</body> 
</html>


coding-zon-jq-validation-css.jpg



 GotoTop


Validating other Form Fields

 

 Example-2:

 

signup.php 

 
<html>

<head> 

<title>Coding-zon jQuery form-validation demo </title>

  
<script src=""></script>

<script src=""></script>
 

<script  type="text/javascript">

 

$(document).ready(function() {

// validate signup form on keyup and submit

$("#signupForm").validate({
 errorClass: "error fail-alert",
 validClass: "valid success-alert",
rules: { 
name: {
	required: true,
	minlength: 5,
	},
age: {
	required: true,
	number: true,
	min: 18,

    },

email: {
    required: true,
    email: true

    },
mobile: {
    required: true,
    number: true,
    minlength: 10, 
    maxlength: 10, 
    },
},
messages: {
name:  { 
    required: "Please enter your password",  
    minlength: "Name should be at least 5 characters",
},
age: {
    required: "Please enter your age",
    number: "Please enter a numerical value",
    min: "You must be at least 18 years old",
},     
email: "Please enter a valid email address",
mobile: 
{   required: "Please enter a valid mobile no",
    minlength: "Enter 10 digits mobile No", 
    maxlength: "Enter 10 digits mobile No ",
},
},


});
});
</script>
 
<style>
 
label.error.fail-alert {
 
    background: #fffccc;
    color: red;
    line-height: 1;
}
input.valid.success-alert {
    border: 2px solid #4CAF50;
    color: green;
    padding: 2px 0 6px 6px;
}

</style>
 
</head>
<body>

<form action="#" method="post" id="signupForm">
 
<p><span>Name :</span>
<input type="text"  placeholder="enter your  Name" name="name"/></p>

<p><span>Age :</span>
<input type="text"  placeholder="enter your  age" name="age"/></p>
 
<p><span>Email :</span>
<input type="text" placeholder="enter your  email" name="email"/></p>
 
<p><span>Phone :</span>
<input type="text" placeholder="Enter 10 digits mobile No" name="mobile" />
</p>
 
<input type="submit" name="submit"  value="Submit"/>
 
</form>

</body> 
</html>

 
<?php 
 
if(isset($_POST['submit'])){


$name =$_POST['name'];

$age =$_POST['age'];
$email=$_POST['email'];
$mobile=$_POST['mobile'];

echo "Name".$name."<br />";
echo "age".$age."<br />";
echo "email".$email."<br />";
echo "mobile".$mobile."<br />";
}

?>



e-trainings-validation-other-controls


To know more about validations visit: this site



Demo


:






Comments

Post a Comment

Popular posts from this blog

Using javascript pass form variables to iframe src

Image
   Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" > <head> <title>Bootstrap Model with PDF Example - coding-zon</title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" > <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.
Read more

Creating a new PDF by Merging PDF documents using TCPDF

Image
Merging two PDFs in PHP What is PDF? The Portable Document Format. PDF stands for "Portable Document Format". Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed. PDF is one of the most commonly used file types around. PDFs generally contain shareable data, such as text or photo documents etc., and are accessible to anyone who has a computer or smartphone. Unlike a Word file, which requires Microsoft Word to view or edit, most browsers will open a PDF. How to merge PDFs? You can merge several documents into one. In PHP, you have a library called TCPDF which allows you to combine one or more PDF documents to one single document. In this article, we will create a new PDF by Merging PDF documents using TCPDF. Download the PDFMerger-tcpdf.zip here. Unzip it and copy it to the PHP server. Copy the PDF files into the same folder that you want to combine. Open the file: merge-pdf-example.php Provide
Read more

Import excel file into mysql in PHP

Image
  Upload Excel file and Import  it into MySQL in PHP  Create a table in some database with given code.   Download Library - extract it, rename the folder to library . Create index.php file with given code in a server. Create excelUpload.php with given code. Create db_config.php . Create one Excel file with some sample data as shown in the below image of Excel file. Create ' uploads ' folder in the same directory. Now start server, run the index.php. Upload a .xls file. If Everything is fine, Excel data inserted in the above created MySQL table - tbl_products . PHP Version:   5.5.11 Folder Structure      Query: CREATE TABLE IF NOT EXISTS `tbl_products` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT, `productname` varchar ( 100 ) DEFAULT NULL , `description` varchar ( 100 ) DEFAULT NULL , PRIMARY KEY (`id`) )     Top index.php <!DOCTYPE html> <html> <head> <title> coding-zon Demo - Upload Excel to MySQL in PHP </title> <lin
Read more