Features
- Check required fields and validate Email, Date, Telephone number and Url.
- Send data and show response with Ajax, highlight the form field on focus and on error.
- Lightweight (only 4KB), unobtrusive and cross-browser (tested on Firefox, Opera, Safari, Internet Explorer 6/7)
- Depend on Prototype Javascript Framework to work.
How to use the Script
- Firstly we need to include our required javascript in our page (prototype.js and protoform.js).
- Put the forms inside a div with id = "box" (is important for the ajax response); you can validate more form in the same document html. then add a class="validate" to any form tag to activate the validation. Important: use also an id attribute in the form tag with the same name of the file that will process data server-side.
Example:
<form class"validate" id="sendMessage" action="sendmessage.php" method="post"> // sendMessage.php
- 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.
Validation options: _Req (required field), _Email (validate yourmail@domain.ext), _Tel (validate telephone number), _Date ( validate date dd/mm/yy), _Url ( validate http, https, ftp address).
Example:
// your prefix_[_Req][_(Tel|Email|Url|date)]
<input type="text" id="name_Req" name="name" title="Required! Please enter your name" />
<input type="text" id="email_Req_Email" name="email" title="Required! Please enter a valid your email address" />
<input type="text" id="telephone_Tel" name="telephone" title="Please enter a valid email telephone number" />
- Include the CSS file (styles.css) and customize stylesheets of your form, errors message (ul#error, displayed with dhtml) and loading display (p#working, displayed with dhtml).
- Enjoy!
Suggestions
You can post your comments, suggestions or bug reports on my blog: I'm happy to receive aid to improve the script.
Download
Get Protoform v1.0 (20/05/2008) - the package contains an working example and the Prototype library.
You can view the source code here.
Protoform is licensed under the GNU LGPL
New version!
Protoform becomes Protoformclass: the update is available here