How to easily validate form and inputs using jQuery

Validation is an important and required functionality for any application. Without proper validations of input, you application will die. So here is a jQuery plugin named "Valideasy " which helps you to validate your forms and input control without worrying about writing long lines of code.

Valideasy is a jQuery plugin that you can use in form validation without writing complex JS script. Everything's done via HTML attributes added to your form fields. And it is is compatible with all modern browsers, starting from IE7. This plugins also allows you to easily customize the validation error message.

You may also like:

• 15+ Useful jQuery Validation Plugins
• All kind of Client Side Validation using jQuery
• How to validate all countries phone numbers using jQuery

Website

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

How to validate all countries phone numbers using jQuery

Earlier I had posted about "Validate phone numbers using jQuery" but that code just validates for valid input, it doesn't check for format of phone number. But recently a jQuery plugin named "International Telephone Input"is released which validates all the international phone numbers along with country code.

International Telephone Input jQuery plugin for entering international telephone numbers. It adds a flag dropdown to any input, which lists all the countries and their international dial codes next to their flags.

You may also like:

• Validate Email address using jQuery
• Validate Date using jQuery
• Validate Date of Birth is not greater than current date using jQuery
• End Date should not be less than Start Date using jQuery Date Picker

Features

• In the country dropdown you can navigate by typing, or using the up/down keys
• Selecting a country from the dropdown will update the dial code in the input
• Typing a different dial code automatically updates the displayed flag
• Country names in the dropdown also include localised versions in brackets
• Lots of initialisation options for customisation, as well as public methods for interaction

How to use it?

To use this plugin, all you need to do is to download the latest version and then link the required stylesheet and reference to plugin library.

<link rel="stylesheet" href="build/css/intlTelInput.css">

Add the plugin script and initialise it on your input element

<input type="tel" id="mobile-number">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="build/js/intlTelInput.min.js"></script>
<script>
  $("#mobile-number").intlTelInput();
</script>

Examples

• Validation:
  Use Google's libphonenumber for validation
  
• Lookup user's country:
  Use IP address lookup to set the default country to the user's country
  
• Country sync:
  Access the country data to create a separate country dropdown for an address form, and then listen for change events to keep the two dropdowns in sync
  
• European countries:
  Only show European country codes
  
• Styling:
  Displays the two different styling settings
  
• Modify country data:
  Modify the data to only show localised country names
  

This jQuery plugins also provides options for customization like for setting default country, dial code delimiter and many more. You can visit the official website for more information.

Official Website

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

15+ Useful jQuery Validation Plugins

Collection of 15+ Useful jQuery Form Validation Plugins.

Form validation is required for better user experience and for security purpose. But implementation of validation can give you serious headache. To save you from serious head bashing, here is a list of 15+ jQuery Form Validation Plugins, that will make form validation easy.

You may also like:

• 5 jQuery Plugin to show Password Strength
• All kind of Client Side Validation using jQuery
• jQuery Validation With ASP.NET Web Forms

jQuery Validation Plugin

jQuery Validation Plugin makes simple clientside form validation trivial, while offering lots of option for customization.

The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 36 locales.

Validetta

Validetta is a tiny jQuery plugin which you can do client-side validation of your forms. It aims to decrease your burden with easy usage and flexible structure. It is currently supported in current stable releases of Chrome, Firefox, Opera, Safari as well as IE8 and up. This plugins works with every input control like text, list, radio button, checkboxes etc..

Formance.js

Formance.js is a jQuery library for formatting and validating form fields. It supports form fields like Credit card, Date, EMail, Phone number etc..

jQuery.validationEngine

jQuery validation engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter.
Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.

nextVal

nextVal is an easy-to-use, flexible and robust form validation plugin for jQuery. Each input should have a validate attribute. Elements can also have placeholder and title attributes. Also validate attribute can be passed multiple values.

bValidator

bValidator is a jQuery plug-in for client side form validation. It supports fully customized error messages defined with template and CSS, many validation functions (actions) like date, email, URL, IP address, validation of dynamic forms, customized validation functions and more.

Ajax Fancy Captcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.

jQuery Credit Card Validator

jQuery Credit Card Validator detects and validates credit card numbers. It’ll tell you the detected credit card type and whether the number length and Luhn checksum are valid for the type of card.

Goodness

Goodness is a light jQuery form validation plugin. There are no included validation rules*, feedback markup or error styles. Instead, you make the rules and use the names as classes in your own markup. When the form is validated, classes will be added or removed from your markup to match your defined styles and animation.

Validity

jQuery.validity is a plugin designed to aid in the configuration of clientside form-validation. Validity was concieved with three goals which are Easy setup, Unobtrusive JavaScript and Customizable Appearence. In style, validity makes use of jQuery's selector engine and follows its pattern of method chaining.

Motion Captcha

MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas, requiring users to sketch the shape they see in the canvas in order to submit a form. At the moment, it’s just a proof-of-concept – it only uses client-side gesture recognition, and doesn’t really have IE support.

Creditly.js

Creditly.js is a jQuery plugin for creating an input masked form with input validation for your customers that makes it easier to input credit card information.

Formly

Formly is a jQuery Plugin for easily adding cross-browser styling and validation to forms. Formly makes adding forms to your site a bit more exciting. Easily add style, validation, and a more impressive user interaction with a single function.

NumBox

The NumBox jQuery Plugin helps ensure that a numeric keyboard will pop-up on mobile devices when a number is entered. It offers real-time validation as you type plus display formatting for mobile devices and desktop browsers, is designed for HTML5's input type="number" elements, and provides a number of customization options.

Pliant

Pliant is a jQuery validation plugin that allows easy extending/overriding of rules, as well as defining field validation by html comments.

Happy Js

Lightweight form validation for jQuery or Zepto.js

Strength.js

The ultimate jQuery password input plugin. Featuring secure strength indicator and hide/show password.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...