Please support us by disabling ad blocker for smarttutorials.net ...

Unique jQuery Validation Success Message Using jQuery Validation Plugin

Posted by & 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.

Unique jQuery Validation Success Message Using jQuery Validation Plugin

Demo

Unique jQuery Validation Success Message Using jQuery Validation Plugin

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>
Unique jQuery Validation Success Message Using jQuery Validation Plugin

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);

.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!