Posts Tagged ‘validation’

Really Easy Field Validation with JQuery

Again JQuery has improved and simplified from the process outlined earlier in this blog

for form validation just add jquery.validate plugin and then in the code add:-

$("#commentForm").validate();

or more likely you’ll have a more complex form so you’ll need to specify a few attributes

var validator = $("#health").validate({
			rules: {
				radiofield: "required",
				textfield: "required",
				email: {required: true,email: true},
				name: "required"
  			},
			messages: {
				email: {
					required: "Please enter a valid email address",
					minlength: "Please enter a valid email address",
				},
				radiofield: "Please Select The number of items to Check"
			},
			// the errorPlacement has to take the table layout into account
			errorPlacement: function(error, element) {
				if ( element.is(":radio") )
					error.appendTo( element.parent() );
				else if ( element.is(":checkbox") )
					error.appendTo ( element.next() );
				else
					error.appendTo( element.parent() );
			},
 
		})

For the full documentation go to http://docs.jquery.com/Plugins/Validation

And don’t forget to handle the form with javascript disabled!

Really easy field validation

SUPERSEEDED PLEASE SEE ‘Really Easy Field Validation with JQuery

from http://tetlaw.id.au/view/javascript/really-easy-field-validation

Include the scripts

<script src="prototype.js" type="text/javascript"><!--mce:0--></script>
 
<script src="validation.js" type="text/javascript"><!--mce:1--></script>

use the class attribute to specify the type of validation

<input id="field1" class="required validate-number" name="field1" />

You then activate validation by passing the form or form’s id attribute like this:

<script type="text/javascript"><!--mce:2--></script>

options for the class attribute are listed below

  • required (not blank)
  • validate-number (a valid number)
  • validate-digits (digits only)
  • validate-alpha (letters only)
  • validate-alphanum (only letters and numbers)
  • validate-date (a valid date value)
  • validate-email (a valid email address)
  • validate-url (a valid URL)
  • validate-date-au (a date formatted as; dd/mm/yyyy)
  • validate-currency-dollar (a valid dollar value)
  • validate-selection (first option e.g. ‘Select one…’ is not selected option)
  • validate-one-required (At least one textbox/radio element must be selected in a group – see below*)