Validate a Forms With Javascript

15.02

Validate a Forms With Javascript

Posted in Downloads, Online Tips by admin

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

If you have an entry system for your web application you might want to check this great javascript form validator since it can help you much to keep your database clean from wrong entry.

So here is the list of form validation system from standalone script and the famous javascript framework like jQuery, MooTools and Prototype.

1. jQuery Validation Plugin

Setup powerful client-side form validation. From a protoype in a few minutes to heavily customized validation rules, methods and messages.

Add the code below on your <head> section and give your form an id named “test”.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#test").validate();
	});
</script>

jquery-validation-plugin
Homepage - Demo - Documentation

2. MooTools.Floor - FormCheck

A class that allows you to perform different tests on form to validate them before submission.

Add the code below on your <head> section and give your form an id named “test”.

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="formcheck.js"></script>
<script type="text/javascript">
	window.addEvent('domready', function(){
		new FormCheck('test');
	});
</script>

mootoolsfloor-formcheck
Homepage - Demo - Documentation

3. LiveValidation

A small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Two versions are provided - a prototype.js version (ideal for use with Rails) and a standalone version (for using with any other javascript framework, or when having one at all would be overkill). Both are fully tested on most modern browsers with a comprehensive test suite.

The basic usage is ease for everyone, only add code below on your <head> section then insert a small script after your html form depend on your validation.

1	<script type="text/javascript" src="livevalidation_standalone.compressed.js"></script>

livevalidation
Homepage - Demo - Documentation

4. ProtoFormClass

A Prototype class that allows you to very easily validate the forms fields and send data in ajax. Already rewritten the code of the old script to make it more object-oriented greatly simplifying deployment.

Add the code below on your <head> section and give your form an id named “test”.

<script src="prototype.js" type="text/javascript"></script>
<script src="protoformclass.js" type="text/javascript"></script>
<script type="text/javascript">
Event.observe(window,"load",function() {
	new Protoform('test');
});
</script>