ProtoForm

Features

• Check required fields (input, textarea, radio, select, multiple checkboxes) and validate Email, Date, integers, numbers,phone numbers and Url.
• Send data and show response with Ajax, highlight the form field on error. Allows you to validate more form on the same page. Very easy to use!
• Lightweight (only 4KB), unobtrusive and cross-browser (tested on Firefox, Opera, Safari, Internet Explorer). Depend on Prototype Javascript Framework to work.

Usage

ProtoformClass utilise the field elements id attribute to indicate the validation requirements (through suffixes).

The title attribute of the form fields (to be valitated) is used to show an error message; assign an id to each of these fields with your prefix and the type of validation desired.

If You want, customize form stylesheets, loading, errors and response message (div.protoform-message ul.error, p.working, inserted by the script).

Event.observe(window,"load",function() {    		
	new Protoform('myform', { ajax:false });
	$$("form.myotherforms").each(function(forms){ 
    		new Protoform(forms);     
	});
});

Options

Class options:

• ajax: enable or disable submit in ajax (default 'true').

• url: Path of the file that processes the form data (optional, to overwite the form action in the ajax call)
• messageContainer: the classname of the container-box for error message and ajax response (default 'protoform-message')
• messagePosition: the position of the error message and ajax response (default 'before')

Validation options (field elements id attribute suffix):

• _Req: required field
• _Email: validate email address
• _Int: validate integers
• _Tel: validate phone number
• _Num: validate number (allowed decimals and signs "+-.,")
• _Date: validate date (dd/mm/yy)
• _Url: validate http, https, ftp address

// some suffix examples

<input type="text" id="name_Req" name="name" title="Required! enter your name" />

<input type="text" id="contact_Req_Email" name="email" title="Required! enter a valid email address" />

<input type="text" id="phone_Tel" name="phone" title="Enter a valid phone number" />

<input type="text" id="date_Date" name="date" title="Enter a valid date" />

Download

Get ProtoForm V 2.0 (23/01/2011) - the package contains an working example and Prototype 1.7 framework.

ProtoForm is licensed under the MIT license.

Suggestions

You can post your comments, suggestions or bug reports on my blog CSSRevolt: i will be happy to receive your feedback, help me to do better plugin!

Changelog

• Version 2.0 (current) - improved code and regular expressions, more customizations options, allow multiple checkboxes, some bugs fix
• Version 1.1 (18/03/2009) - added number validation option + some improvements to the code
• Version 1.0 (27/10/2008) - initial release