mi-ca.ch - jquery checkForm plugin

contact

Jquery checkForm

Jquery checkForm is a jquery plugin made to simplify client side checks of formular fields

Goals:

  • easy to implement
  • easy to use
  • you can use your own css classes
  • automatic check email format
  • automatic check numeric value
Download normal version (8ko) | Download minified version (4ko)

Note:The client side tests is not sufficient, you must test variables form server side too.

About the author :

My name is Michael Caillet, I teach internet languages in a multimedia school in Switzerland.

ChangeLog

2010.01.27
Version 0.1
  • First version
  • check input type text and textarea
  • check email and numeric values
  • add error class to input and label
2010.03.30
Version 1.0
  • 2nd Version
  • fix bugs : check input type radio and checkbox
  • automark required field with any symbol new params
form 1 * requiered fields





Test checkbox



Test radio






Basic usage

jquery checkForm is really easy to use: follow the steps below

  1. Download jquery library and save it into a js folder
  2. Call the jquery library : 
    <script type="text/javascript" src="js/jquery-1.4.min.js"></script>
  3. Download jquery.checkForm plugin (min) and save it into the js folder
  4. Call the jquery library : 
    <script type="text/javascript" src="js/jquery.checkForm.1.0.js"></script>
  5. Create another js doc into your js folder
  6. Call plugin with your own selector e.g. 
    $(document).ready(function(){
	$('form').checkForm();
})
  7. Add class="require" to the required fields in your form
  8. Add this css in your css file input.error,textarea.error{ border:1px solid #f00; } label.error,option.error{ color:#f00; }

By default, the plugin checks all fields having the class class="require"

If a field has the string "email" in his id, e.g id="myEmail" or id="email", jquery checkForm will automaticly check if the value is a correct email.

If a field has the string "numeric" in his id, e.g id="ZIPcode_numeric" or id="numericValue", jquery checkForm will automaticly check if the value is a number.

For checkbox or radio button, add require class to each item, jquery checkForm will check at least one is checked

Jquery checkForm add class="error" to the field and to the corresponding <label>


Use your own css class

Default value is class="require" and class="error"

$(document).ready(function(){
  $('form').checkForm({
	// optional specific require field class
	requireClass : 'myOwnRequireClass',
	// optionnal specific error class added in case of error 
	errorClass   : 'myOwnErrorClass' 
  });
})

Use (or not) a marker to specify requiered input

You can specify if you want jquery.checkForm add automaticly a typographic symbol to each required label

Default value is *

Use your own marker

	$(document).ready(function(){
		$('form').checkForm({
		 requireMark: '!' // add ! after each require label
		});
	});

Don't use marker

	$(document).ready(function(){
			$('form').checkForm({
			 requireMark: false // no marker
			});
	});