Truly Useful Form Validation Scripts for Front End Development

The value of validating user input should not be underestimated. First of all it helps user put in the right information faster and if implemented elegantly users may not even notice that they are assisted.

Client side validation can work as users type and instantly advice them without waiting till the submit button have been pressed (and until the user have waited for a round trip to the server. If the information you need to check against is not possible to have available for client side validation you should consider using ajax to retrieve the information behind the scene while your users work with the form.

In order to do this you will need server side executions as well but it is quite simple as shown in the user name checker below. This post cover the best scripts and tutorials available and will get you started validating faster than you think.

Using WordPress? Check out our recent post: Most Essential Tips for Improving Response Time of Your WordPress Blog

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

Masked Input Plugin for jQuery

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). If you like the simplicity of jQuery you will like this validation script too!

A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user. The following mask definitions are predefined:

• a – Represents an alpha character (A-Z,a-z)
• 9 – Represents a numeric character (0-9)
• * – Represents an alphanumeric character (A-Z,a-z,0-9)

jQuery plugin: Validation

jQuery is elegant and simple! Validation build on top of jQuery plugins is too… With this jQuery plugin you need a single line of jQuery to select the form and apply the validation plugin. And a bit of metadata on each element to specify the validation rules.

$(“#commentForm”).validate();
…
class=”required email”

Stunning ajax form validation

This is a tutorial that shows you how to create a very nice jQuery-based form with ajax posting and validation. Our form will also change the css classes of the inputs, display validation errors and all that sexy stuff which is meant to help our visitor better identify what was filled wrong and what needs to be done in order to successfully submit the form.

A jQuery inline form validation

When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something the author have tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

How to Validate Forms in both sides using PHP and jQuery

This is a awesome validation tuts! Learn how to validate your forms using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP). It will be interesting to see how to use regular expressions to validate different kind of e-mails, passwords and more.

Simple jQuery form validation

This form validator is pretty easy to implement and is built with jQuery. Since the link doesn’t have a download you can download it here http://www.willjessup.com/sandbox/jquery/form_validator/val.js

Form validation with jQuery from scratch

The tutorial covers building a lightweight, flexible solution from scratch. It won’t be nearly as advanced and powerful as the official plugin. Nevertheless, I hope you’ll learn something from a jQuery, JavaScript and Object-Oriented aspect.

iMask

Who haven’t ever wanted to apply an input mask to an HTML form field? This very common feature in traditional GUI applications is not natively supported by web applications. iMask goal is to implement an easy way for developers to add mask into their form fields, increasing the database and software consistency with standard compliant XHTML and unobtrusive JavaScript.

iMask is an open source (free) javascript tool for creating input and textarea masking. It is built on Mootools, supports keyboard control and dynamic charset definition.

LiveValidation

LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time, making the forms easier, quicker and less daunting to complete.

dFilter

A tiny JavaScript for input masking. This script will easily allow you to add an input mask to a textbox. The mask for a phone number could look like this for example “(###) ###-####”.

Phatfusion form validation

Simple and easy to use form validation based on mootools.

Typecast – The Input Field Library

Typecast is an Input Field Augmentation Library. When complete it will add autocomplete, suggest and realtime character masking ability to the standard HTML input field. And who knows, it’ll probably end up doing even more! I’m currently working on the Suggest functionality which is coming along nicely. Typecast requires no JavaScript code in the <body>. Rather it scans the document on load and binds the appropriate Typecast Behaviours to the fields based on the information you specify in the field’s rel attribute.

JavaScripTools

JavaScripTools is a set o JavaScript components, functions and classes to make the web developer’s life easier. Most modern browsers, like Firefox, Internet Explorer, Opera and Konqueror are supported.

Features:

• Numerous functions that performs common operations on objects, strings, arrays, form fields, events and more
• Parsers / formatters for many data types, including numbers and dates – i18n (internationalization) may be taken to JavaScript level
• A dynamic table, supporting paging, sorting and editing, fully customizable using CSS (Cascading Style Sheets)
• Masks for restricting / formatting user input on form fields

Ajax Username Availability Checker

This plugin allows you to check the username availability without reloading the page.

FormCheck – Form validation class

FormCheck is a class that allows you to perform different tests on form to validate them before submission.

Form Validator

fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation.

• Works perfect with iMask as it’s complement.
• Multiple forms per page supported.
• Number of verified fields is not limited.
• Number of filters per field is not limited.
• Predefined formats: required, alpha, alphanum, integer, real, date, email, phone, url. (all customizable)
• Support to register missing formats.
• Highlight fields onValid and onInvalid.
• Error reporting just after onBlur.
• Easy to set and maintain.
• Unobstrutive and XHTML Strict friendly.

Thanks for visiting us – want more inspiration?

Do you have a Ebook reader? There is a lot of awesome Nook color covers that will personalize and protect your Nook color.

Optimize your search engine ranking easily with Traffic Travis and the little known loopehole technique.

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.