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" />