Webshims Lib

Polyfill only the incapable browsers

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 located in the extras-folder (custom-validity.js). This script is an extension and it works with and without Webshim Lib.

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

//$.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