Jquery Plugin Demos- Validation and file upload plugins

Jquery is write less and do more…. If you haven’t used Jquery yet, go get it right now from here
Believe it or not, but finding good plugins from the jungle of many plugins is really difficlt. Here few of articles will help you to identify good plugins that you will always like to use.

* Let the page load completely to use the demos

• Example 1 :Mask Input fields
Just click mouse in any one of the field below and try typing different values. See how nicely it validates the fields. You can create your own masking formats with regular expressions.




Date		99/99/9999
Phone		(999) 999-9999
Tax ID		99-9999999
SSN		999-99-9999

Code :
jQuery(function($){<br /> $(”#date”).mask(”99/99/9999″);<br /> $(”#phone”).mask(”(999) 999-9999″);<br /> $(”#tin”).mask(”99-9999999″);<br /> $(”#ssn”).mask(”999-99-9999″);});

Visit Site

• Example 2 : Form Validator
This is a simple form validatin control which automatically validates fiels like email, url, phone number etc. Just say “validate” and that’s it







Please provide your email address (won’t be published)


E-Mail (required)

URL (optional)




Code :
$.validator.setDefaults({<br /> submitHandler: function() { alert(”submitted!”); }<br /> });<br /> $().ready(function() {<br /> $(”#commentForm”).validate();<br /> });

Visit Site

• Example 3: Alphanumeric validator
Do you want simple validations which contains alpha and numeric fields? This is the best and easy to use plugin for you.
	Allow only alphanumeric characters	Code : $(’.sample1′).alphanumeric();
	Allow only alphanumeric characters, and some exceptions like dot(.), comma (,) and space	Code :$(’.sample2′).alphanumeric({allow:”., “});
	Allow only lowercase alpha characters	Code :$(’.sample3′).alpha({nocaps:true});
	Allow only numeric characters	Code :$(’.sample4′).numeric();
	Allow only numeric characters, and some exceptions like dot (.)	Code :$(’.sample5′).numeric({allow:”.”});
	Make a custom rule and define only certain characters to prevent, like dot (.), one (1), and a (a)	Code :$(’.sample6′).alphanumeric({ichars:’.1a’});
Visit SiteDownload Code
Example 4: Validate username through AJAX
Whenever a new user registers your site, check from database in realtime if the username exists. Instead of giving error after submitting the form this helps user to select available username. Current example use the datafile to check username availability. You can easily change it to use database instead.
Registration Form
Username:


Password:

Code :
$.post(”http://www.myphpdunia.com/jquery/check.php”, {<br /> username: $(’#username’).val()<br /> }, function(response){<br /> $(’#usernameResult’).fadeOut();<br /> setTimeout(”finishAjax(’usernameResult’, ‘”+escape(response)+”‘)”, 400);<br /> });
Visit Site
Example 5 : Multiple File Upload
Want to give multiple files upload facility to your user? See below two examples by selecting different files. This plugin gives mutiple options like number of files, type of files etc.
Example 1 Limit: 2 files. Allowed extensions: any. Code : <br /> <input type="file" class="multi" maxlength="2">

Example 2 Limit: no limit. Allowed extensions: gif and jpg. Code : <br /> <input type="file" class="multi" accept="gif|jpg"/>
Visit SiteDownload Code
Example 6: Default input values
Many sites write something like “Input Username” in the username text box. This disappears when user clicks in the box and types his own username. Wondering how they do it? Here is simple was using jquery. Only 3 lines of code is needed.
Name : E-mail address Email Address:
Code :
$(”#txtEmail”).toggleVal({<br /> populateFrom: “label”,<br /> removeLabels: true<br /> });
Visit SiteDownload Code
Any other good form control plugin, you came across. Let me know trough comment and I will like to update my list.
Coming soon …..
Jquery menu plugins and Jquery datagrid plugins. Keep watching.