Examples

Examples

Here you will see LiveValidation in action, and the code that makes it all happen, to serve as examples of its capabilities and as tutorials to get you started.

IMPORTANT – As you probably already know, relying on client-side validation alone is a very bad idea. Always perform appropriate server-side validation as well. The purpose of this library, and javascript validation in general, is not to replace server-side validation, but make the act of filling in a formless daunting for a user, and to save them time.

Contents

  • Homepage example
  • Presence
  • Format
  • Numericality
  • Length
  • Inclusion
  • Exclusion
  • Acceptance
  • Confirmation
  • Email
  • Composite validations (combining validations)
  • Validating entire forms
  • Styling it up

Homepage example

First up, just in case you were wondering, the homepage example consists of 2 validations – Presence to make sure it is filled in, and Format to check that the value entered contains ‘hello’ in any case. Here is how it works…

Say “hello”: 

First, the field is set up to be a LiveValidation object, bypassing in its id as the first argument. In this example the valid message has also been overridden by including an options object:

var sayHello = new LiveValidation( "sayHello", { validMessage: "Hey there!" } );

Then the Presence validation is added to it, and this example also provides an overridden failure message:

sayHello.add( Validate.Presence, 
              { failureMessage: "Don't just ignore me, I wanna be your friend!" } );

Finally, the Format validation is added, with the regular expression pattern to validate against, again with an overridden failure message for this example:

sayHello.add( Validate.Format, 
              { pattern: /^hello$/i, failureMessage: "How come you've not said 'hello' yet?" } );

Presence

The presence will fail if there is no value entered in the field.

Enter the field then click somewhere else: 

var f1 = new LiveValidation('f1');
f1.add( Validate.Presence );

Format

The format will fail if the value does not match the regular expression.

Should contain the phrase “live” in any case: 

var f2 = new LiveValidation('f2');
f2.add( Validate.Format, { pattern: /live/i } );

Numericality

This kind of validation is concerned with numbers. It can handle scientific numbers (ie. 2e3, being 2000), floats (numbers with a decimal place), and negative numbers properly as you would expect it to throughout, both in values and parameters.

Basic

This example will check if the value provided is a number, or can be converted into a number successfully (ie from a string – the value of text input is a string). This is performed on every type of Numericality validation automatically but can be used in its simplest form like this if you only want to make sure the value entered is a number.

Should be a number: 

var f3 = new LiveValidation('f3');
f3.add( Validate.Numericality );

Only allow integers

This example will check that the number supplied is, or equates to, an integer (ie. no decimal places).

Should be an integer: 

var f4 = new LiveValidation('f4');
f4.add( Validate.Numericality, { onlyInteger: true } );

Specific number

This example will check that the value is the same as, or equates to, a specific number that you supply.

Should be 2000 (or scientific representation of it, 2e3): 

var f5 = new LiveValidation('f5');
f5.add( Validate.Numericality, { is: 2000 } );

Higher than or equal to a minimum number

This example will check that the value is more than or equal to a minimum number that you supply.

Should be 2000 or higher (or scientific representation of it, 2e3): 

var f6 = new LiveValidation('f6');
f6.add( Validate.Numericality, { minimum: 2000 } );

Lower than or equal to a maximum number

This example will check that the value is less than or equal to the maximum number that you supply.

Should be 2000 or lower (or scientific representation of it, 2e3): 

var f7 = new LiveValidation('f7');
f7.add( Validate.Numericality, { maximum: 2000 } );

Within a range of numbers

This example will check that the value is a number that falls within a range that you supply. This is done by supplying both a ‘minimum’ and ‘maximum’.

Should be between 2000 and 2003: 

var f8 = new LiveValidation('f8');
f8.add( Validate.Numericality, { minimum: 2000, maximum: 2003 } );

Combination

Most of the above parameters can be combined, the only exception being that you cannot combine ‘is’ with ‘minimum’ or ‘maximum’, if this is done ‘is’ will take precedence. This example will check that the value is a number that falls within a range that you supply and that it is an integer. This is done by supplying both a ‘minimum’ and ‘maximum’, and true for ‘only integer’.

Should be between 2000 and 2003, and also be an integer: 

var f9 = new LiveValidation('f9');
f9.add( Validate.Numericality, { minimum: 2000, maximum: 2003, onlyInteger: true } );

Length

Length is concerned with the number of characters in a value. You can do various validations on it, like check it is a specific length, less than or equal to a maximum length, greater than or equal to a minimum length, or falls within a range of lengths.

Specific length

This example will check that the value is the exact length of which you supply.

Should be 4 characters in length: 

var f10 = new LiveValidation('f10');
f10.add( Validate.Length, { is: 4 } );

Longer than or equal to a minimum length

This example will check that the value is more than or equal to a minimum length that you supply.

Should be 4 or more characters in length: 

var f11 = new LiveValidation('f11');
f11.add( Validate.Length, { minimum: 4 } );

Shorter than or equal to a maximum length

This example will check that the value is less than or equal to the maximum length that you supply.

Should be 4 or fewer characters in length: 

var f12 = new LiveValidation('f12');
f12.add( Validate.Length, { maximum: 4 } );

Within a range of lengths

This example will check that the value is a number that falls within a range that you supply. This is done by supplying both a ‘minimum’ and ‘maximum’.

Should be between 4 and 8 characters in length: 

var f13 = new LiveValidation('f13');
f13.add( Validate.Length, { minimum: 4, maximum: 8 } );

Inclusion

Inclusion lets you validate against a list of allowed values. You can do an exact match or a partial match.

Exact match

This example will check that the value is the same as any in your allowed values.

Should be “cow”, “pigeon”, or “giraffe”: 

var f14 = new LiveValidation('f14');
f14.add( Validate.Inclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ] } );

Partial match

This example will check that any part of the value matches something in the allowed list. Allow this by setting the ‘partial match’ to be true.

Should contain “cow”, “pigeon”, or “giraffe” somewhere in your entry: 

var f15 = new LiveValidation('f15');
f15.add( Validate.Inclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ], partialMatch: true } );

Exclusion

Exclusion lets you validate against a list of values that are not allowed. You can do an exact match or a partial match.

Exact match

This example will check that the value is not the same as any in your allowed values.

Should not be “cow”, “pigeon”, or “giraffe”: 

var f16 = new LiveValidation('f16');
f16.add( Validate.Exclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ] } );

Partial match

This example will check that no part of the value matches something in the disallowed list. Allow this by setting the ‘partial match’ to be true.

Should not contain “cow”, “pigeon”, or “giraffe” anywhere in your entry: 

var f17 = new LiveValidation('f17');
f17.add( Validate.Exclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ], partialMatch: true } );

Acceptance

Acceptance lets you validate that a checkbox has been checked.

I accept that LiveValidation is the validation of my dreams: 

var f18 = new LiveValidation('f18');
f18.add( Validate.Acceptance );

Confirmation

This is used to check that the value of the confirmation field matches that of another field. The most common use for this is for passwords, as demonstrated below, but will work just as well on other field types.

Enter a password: 
Confirm password: 

var f19 = new LiveValidation('f19');
f19.add( Validate.Confirmation, { match: 'myPasswordField' } );

Email

The email validation is not a real kind of validation in the sense that it actually uses the Validate. Format function to do its validation. It is essentially a validation that is done often enough to merit its own function so you don’t have to remember the long regular expression and custom failure message each time you want to validate an email.

It also serves as an example for the more adventurous of you, who want to make your own library of custom validations that you will use often. These will most likely include things like postcodes, telephone numbers, dates etc. which vary far too widely to include here, but it was felt that email addresses are generic enough to warrant inclusion, so here you go.

Should be an email address: 

var f20 = new LiveValidation('f20');
f20.add( Validate.Email );

Composite validations (combining validations)

Most of the time, you will want to combine multiple types of validation on a single field. As your user is given real-time feedback, it would also be good to be able to specify an order in which they fail, so that the most appropriate message is displayed to avoid any confusion.

LiveValidation makes this easy. You simply keep adding validations to the same LiveValidation object, and they will fail in the order they are added.

The most usual combination you will use is Validate. Presence with one or more other validations, as only Validate. Presence, Validate. Confirmation and Validate. Acceptance will fail and display their message on an empty field. This is because it is common to have fields that are optional, but if the user decides to provide information, then it must be less than a certain length etc. Therefore if you want to ensure a field is filled in, you must add a Validate. Presence, then if you require any more validation types add them too.

You have already seen an example of a composite validation in the homepage example. The following example checks that the field is not empty, then checks that it is an email address, and then makes sure it is between 10 and 20 characters long.

Enter an email address (10 – 20 characters long): 

var f21 = new LiveValidation('f21');
f21.add( Validate.Presence );
f21.add( Validate.Email );
f21.add( Validate.Length, { minimum: 10, maximum: 20 } );

Validating entire forms

To validate an entire form we use the LiveValidation.massValidate static function. First set up fields that you want validating to be LiveValidation objects, as we have been doing above. Then to validate them as a whole, simply call LiveValidation.massValidate passing it an array containing references to these objects. This will return true if all the fields were valid, and false if any fail, but if one fails it will remember this and carry on doing all the validations so that the appropriate messages are shown for each field, so your user can easily see on the form which fields were invalid.

This however is not all that useful on its own, as the form will still continue submitting unless we intercept it. This is done by returning the whether mass validation failed or passed, from the onsubmit event of the form, like so:

// create some LiveValidation fields
var fakeLV1 = new LiveValidation( 'fakeField1' );
fakeLV1.add( Validate.Presence );
var fakeLV2 = new LiveValidation( 'fakeField2' );
fakeLV2.add( Validate.Email );

// get the form
var form = document.getElementById( 'fakeForm' );

// make it validate the form on its onsubmit event, and return whether
form.onsubmit = function(e){
                             return LiveValidation.massValidate( [ fakeLV1, fakeLV2 ] );
                            }

As an example, here a form will be wired up in this way, but as we dont actually have anywhere to submit the form to, we will stop the form from submitting, and then instead we will alert out whether the form is valid or not. NB this is for demonstration only, and should not be copied for your production forms, use the previous example instead. Note that the email field has no validation that it is present, therefore if this is not filled in, the form will still be valid, as it will be treated as an optional field.