## Adding new validation constraints/dynamically changing constraints of HTML5 form elements

There are 3 ways to add/use custom validation constraints with HTML5.

- pattern attribute (see also html5pattern.com)
- dynamically changing constraints depending on a value/checkedness of another form-control
- setCustomValidity

### Customvalidity Helper

Webshim Lib comes with a simple custom validity helper.

Simply set addValidators to true

`$.webshims.setOptions('forms', { addValidators: true });`

The custom-validity adds a new method called `$.webshims.addCustomValidityRule`.

`//wait until form-validators are implemented $.webshims.ready('form-validators', function(){ //$.webshims.addCustomValidityRule(name of constraint, test-function, default error message); $.webshims.addCustomValidityRule('testname', function(elem, value){ if(value && $(elem).hasClass('test-class') && value != 'foo bar baz'){ return true; //means yes, it's not valid } else { return false; //no, it is valid } }, 'you have to enter foo bar baz'); //changing default message $.webshims.customErrorMessages.testname[''] = "you really have to enter 'foo bar baz'"; //adding new languages $.webshims.customErrorMessages.testname['de'] = 'Sie müßen "foo bar baz" eingeben'; });` `<!-- changing validation message for a specific element, using x-moz-errormessage--> <input class="creditcard-input" x-moz-errormessage="Please, enter a valid creditcard number" type="number" /> <!-- changing validation message for a specific element, using data-errormessage--> <input class="creditcard-input" data-errormessage="Please, enter a valid creditcard number" type="number" />`

In case of changing a property, which effects the custom validity of the field, simply trigger the 'refreshCustomValidityRules' event on this field:

`$('input[data-minlength]').val('some value').trigger('refreshCustomValidityRules');`

### Predefined custom validity attributes

#### creditcard

All elements with the class 'creditcard-input' should have a creditcard number.

#### tooShort

All elements with the attribute data-minlength have a minimum value length

`//the minimum length is 6 <input data-minlength="6" />`

#### group-required

If a checkbox has the class 'group-required' at least one of the checkboxes with the same name inside the form/document has to be checked.

#### dependent

Dependent validation dynamically changes the validation constraints depending on another elements value.

The attribute data-dependent-validation either takes an IDREF or a JSON-String with the dependency options.

The options are as follows:

- from (required): IDREF (ID or name of the element)
- prop (optional): property, which should be changed | default: value/disabled (depends on type of from-element disabled, if from-element is a checkbox/radiobutton, value otherwise)
- from-prop (optional): default value/checked (depends on type)
- toggle (optional): reverts the prop-state (only if from-prop equals checked)

`<!-- equals code would look like this --> <input type="password" id="password" /> <input data-dependent-validation="password" type="password" id="repeat-password" />` `<!-- if checkbox is checked, the field is required --> <input type="checkbox" id="checkbox" /> <input data-dependent-validation='{"from": "checkbox", "prop": "required"}' />` `<!-- if checkbox is unchecked, the field is required --> <input type="checkbox" id="checkbox" /> <input data-dependent-validation='{"from": "checkbox", "prop": "required", "toggle": true}' />` `<!-- max of the first date equals value of the second --> <!-- mmin of the second date equals value of the first --> <input data-dependent-validation='{"from": "date-to", "prop": "max"}' type="date" id="date-from" /> <input data-dependent-validation='{"from": "date-from", "prop": "min"}' name="date-to" type="date" id="date-to" />`

### Simple Demo

* Required fields

creditcard:
data-minlength (5):
data-partial-pattern (foo):
email:
repeat email (dependent-validation="email"):
checkbox-group:
checkbox: (used as from-prop)
dependent-validation="checkbox":
checkbox2: (used as from-prop)
dependent-validation='{"from": "checkbox2", "toggle": true}':
date-from (dependent-validation='{"from": "date-to", "prop": "max"}'):
date-to (dependent-validation='{"from": "date-from", "prop": "min"}'):
special1:
special2 (dependent-validation='{"from": "special1", "prop": "required", "from-prop": "value:test1||test 2"}'):