validation

Overview

Form validation must always be backed-up by server side validation.

Both client and server-side validation must display validation and error messages in the same way, to ensure consistency of implementation.

Example
  • Please correct the error here
  • This password has been used before
  • That's great, thank you
  • You're using a Gmail account, would you rather use a HCC one?
WCMS use
MVC.net use
Code

Inputs

The parent container of the input and label (typically an <li/> element will have one of the following classes applied to it:

  • error
  • warning
  • success
  • info

In addition, the <span class="help"></span> element inside the input contaner will be used to display the actual details of the validation message.

<li class="row error">
	<label for="ex1">Erroring field</label>
	
	<input type="text" name="ex1" id="ex1" value="incorrect text"/>
	<span class="help">Please correct the error here</span>
</li>

Fieldsets

Apply the relevant class to the fieldset itself.

Pick an option Please pick an option

Client-side validation

Client-side validation uses the jquery validation plugin jqueryvalidation as more thoroughly documented at jqueryvalidation.org/documentation.

Default functionality ensures that client-side validation is attached to any well-formatted HTML form using HTML5 input types, minlength, maxlength attributes and the required boolean.

Give your form the class "validate" to apply client-side validation to your form.

An empty div with the classes "alert formalerts" is placed inside the form to hold top level messages.

Please provide your name, email address (won't be published) and a comment
  • at least 2 characters

More complex, conditional formatting can be configured by adding rules and custom validators as described in the jqueryvalidation documentation.

These can be passed into the initialisation as a script using the data-validation-extend attribute to specify the url of your additional rules:

<form class="validate" data-validation-extend="url/of/additionalrules.js" id="commentForm" method="get" action="">
<div class="alert formalerts"></div>
…
</form>	
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release