Unique jQuery Validation Success Message Using jQuery Validation Plugin

Posted 6:23 pm by muni & filed under JQUERY, PHP.

Imagine moments like this, when we are doing something in our life, there is someone who appreciates every work we do. This type of appreciation always boost our energy and happiness. This tutorial on Unique jQuery Validation Success Message Using jQuery Validation Plugin is some type appreciation you are giving to your visitors when they entering their information in your site.

Just follow this tutorial step by step to implement this. In this tutorial I am using same interface I have used in my previous tutorial on Send an E-Mail with Attachment Using jQuery, Ajax and PHP without Refrshing a Page. I had clearly explained HTML and css part implementation on this tutorial  (Send an E-Mail with Attachment Using jQuery, Ajax and PHP without Refrshing a Page) . Please refer those part in my previous tutorial.

We are going to see in this tutorial only Unique jQuery Validation Success Message implementation part.

Demo

Unique jQuery Validation Success Message Using jQuery Validation Plugin

Step 1:

Add the following jQuery libary files in your index.php file.

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>

Download

Step 2:

Here is the jQuery validation script.

$("#mailForm").validate({
			     rules: {
					name: {
					   required: true,
					   minlength : 3
					},
					email:{ 
					   required: true,
					   email: true
					},
					phone: { 
					  required : true,
					  number:true,	
					  minlength : 10,
				      maxlength : 11
					},
					image: "required",
					message: "required",
					femail:{ 
					   required: true,
					   email: true
					}
			     },
			     messages: {
						name: {
						   required:"Please enter your name",
						   minlength: "Please enter a valid name"
						},
						email:{ 
						   required: "Please enter your email",
						   minlength: "Please enter a valid email address",
						},
						phone: { 
						   required: "Please enter your phone number",
						   minlength: "Please enter your valid phone number",
						   maxlength: "Please enter your valid phone number"
						},
						image: "Please Choose your image",
						message: "Please enter your message",
						femail: { 
						   required: "Please enter your email",
						   minlength: "Please enter a valid email address",
						}
			     },
			     debug: true,
				 errorElement: "em",
				 errorContainer: $("#warning, #summary"),
				 errorPlacement: function(error, element) {
					error.appendTo( element.parent("td").next("td") );
				 },

				 success: function(label) {
					var messages = new Array(
						"That's Great!",
						"Looks good!",
						"You got it!",
						"Great Job!",
						"Smart!",
						"That's it!"
                    );
					var num = Math.floor(Math.random()*6); 

					label.text(messages[num]).addClass("success");

				}

			 });

Here i have selected the form that we are going validate now with it’s unique id $(“#mailForm”) name in jQuery and then selected each fields in the form with it’s unique id’s and applied validation in the rules section and in the message i have specified error unique messages.

Step 3:

Here comes hero part.

When users entered correct information in the form fields following unique success messages will be displayed that boost your users interest in your site.

success: function(label) {
       var messages = new Array(
			"That's Great!",
			"Looks good!",
			"You got it!",
			"Great Job!",
			"Smart!",
			"That's it!"
       );
var num = Math.floor(Math.random()*6); 					
label.text(messages[num]).addClass("success");					
}

Based random number genereated using Math random() method, messages in the messages array will be displayed.

var num = Math.floor(Math.random()*6);

.