Validation of HTML form data
Thanks to the new HTML Standard and the WHATWG Group it is easier than before to have Browsers show standard errors when a user does not provide valid data inside an input element. Unfortunately this only works in newer Browsers, and not in older ones (e.g. Internet Explorer 8).
To make it easier for developers, depage-forms provides an way easy way to add validation to forms that works in all three different places at the same time:
- on the server
- in the browser, based on the new html standard
Standard Input Elements
There are various standard input elements that are part of the HTML standard and will be validated by the browser. E.g. input[type=email] and input[type=url]. Other input elements are presented with a different user interface or as native controls like input[type=number], input[type=range] or input[type=date].
depage-forms uses these inputs but extends and enhances the behaviour in various places.
The most simple case for validation happens when an input is required:
Validation based on type
depage-forms also validates based in the input-type. And you can provide an optional error-message that will be displayed, in case the user does not provide valid data.
Validating number with min/max values
For numbers there is the special case of minimum and maximum numbers:
Validation based on regular expressions
The next way to validate values are regular expressions. These inputs will be validated on the server and also in newer browsers that understand the pattern-attribute.
Validation with closures
Instead of validation with a regular expression, you may also provide a closure function to validate the input value. The closure function will only be validated on the server, not on the client.
Difference to the HTML standard
There is one important case where depage-forms behaves differently from simple html-inputs: Checkboxes.
In HTML5 if a checkbox is required, every required checkbox in a set has to be checked to validate. In depage-form the boolean field works the same way. If it is required, you have to check it.
But if you use the input-multiple with the checkbox skin, the user only has to check one checkbox of a set to pass validation (analogous to the radio-buttons/input-single).
The validation is executed on blur by default, which means everytime you leave a specific input element. The user may only submit the form after entering valid data for all fields.
More complex validation with dependencies
More complex validations with dependencies between different input fiels are possible, but should be done with subclassing the htmlform. These will be a topic for another post.