Mootools FormValidator – How to use (Final Part)

How to use Mootools Formvalidator effectively – a tutorial in 4 parts

This additional part contains stuff that didn’t fit in the previous parts and things I’ve been asked (or asked myself) afterwards.

Optional minimum length

Imagine something like this: A user can enter her postcode (which by any weird definition has to contain at least 5 characters) but isn’t required to. So the field can either be empty or – if it’s filled – it has to contain 5 or more characters.

A custom validator could look like this:

FormValidator.add('optionalMinLength', {
	errorMsg: function(element, props) {
		return 'Leave this empty or enter at least ' + props.optionalMinLength + ' chars';
	},
	test: function(element,props) {
		if (element.value.length > 0 && element.value.length < props.optionalMinLength) {
			return false;
		}
	return true;
	}
});

Usage:

   <input type="text" name="postcode" class="optionalMinLength:5" />

How does it work? The test function is similar to the ones before: First we check if our element has a length of at least one - if so (something is filled in) we compare it to our property (here: optionalMinLength). And if the element is too short, the test fails.

One thing to notice here is the error message - instead of using a simple text we can apply the same arguments to the function as we use for the test method: The element and properties. So we can print our error message dynamically by inserting the number of required characters.

Shipping Address Example

Depending on a user selection, some fields might change their required-status. A common example would be a shopping cart where you select Ship to another address - in this case the shipping address fields would become required.

This works out-ouf-the-box if you include the Form.Validator.Extras-package. Here's an example:

<label for="shipping">Ship to a different address?</label>
<input type="checkbox" class="validate-toggle-oncheck toToggleChildrenOf:'shippingfields'" id="shipping" name="profile[shipping]" />
			
<div id="shippingfields">
			
	<label for="ship_street">Shipping address</label>
	<input type="text" class="required" id="ship_street" name="profile[ship_street]" />

	<label for="ship_city">Shipping city</label>
	<input type="text" class="required" id="ship_city" name="profile[ship_city]" />

</div>

The validate-toggle-oncheck validator toggles all the fields which are children of the ID you provide. In this case we simply added a DIV with the ID "shippingfields" and put all the fields which depend on this checkbox insde.

So if the checkbox is not selected, the shipping address-fields are ignored - otherwise they are validated.

You can also provide a list of fields to toggle:

	<input type="checkbox" class="validate-toggle-oncheck toToggle:['ship_street','ship_city']" id="shipping" name="profile[shipping]" />

Shipping address improved

The previous example has one small disadvantage when it comes to usability: If you'd like to mark required fields with a * you can't put the asterisk on the shipping address fields, since that depends. But we can improve the general usability by simple toggling their visibility:

<label for="shipping">Ship to a different address?</label>
<input type="checkbox" onclick="$('shippingfields').toggleClass('hidden')" class="validate-toggle-oncheck toToggleChildrenOf:'shippingfields'" id="shipping" name="profile[shipping]" >
			
<div id="shippingfields">
			
	<label for="ship_street">Shipping address</label>
	<input type="text" class="required" id="ship_street" name="profile[ship_street]" />

	<label for="ship_city">Shipping city</label>
	<input type="text" class="required" id="ship_city" name="profile[ship_city]" />

</div>

The CSS-class hidden is defined as display:none

More to follow....