Regula is an annotation-based form-validation library for client-side validation written in JavaScript
Regula is an annotation-based form-validation library for client-side validation written in JavaScript. Validation constraints are attached to input elements in a manner similar to HTML5 constraints, via the data-constraints attribute:
<input type="text"
id="social"
name="social"
data-constraints="@Required @Pattern(regex=/\d{3}-\d{2}-\d{4}/)" />
Regula also provides the ability to attach custom constraints to elements:
regula.custom({
name: "MustBe42",
defaultMessage: "The answer must be equal to 42",
validator: function() {
return this.value == 42;
}
});
And then:
<input type="text" name="something" data-constraints='@MustBe42' />
Parameters are also supported:
regula.custom({
name: "MustBeSpecifiedNumber",
params: ["number"],
defaultMessage: "The answer must be equal to {number}",
validator: function(params) {
return this.value === params.number;
}
});
And then:
<input type="text" name="something" data-constraints='@MustBeSpecifiedNumber(number=10)' />
Regula also provides the ability to segment validation through validation groups:
<input type="text" name="street" data-constraints='@Required(groups=[AddressGroup])' />
<input type="text" name="city" data-constraints='@Required(groups=[AddressGroup])' />
<input type="text" name="state" data-constraints='@Required(groups=[AddressGroup])' />
<input type="text" name="zip" data-constraints='@Required(groups=[AddressGroup])' />
Validation can then be performed like so:
var constraintViolations = regula.validate({
groups: [regula.Group.AddressGroup] //AddressGroup property is automatically added
});
Regula also supports HTML5 constraints (either through native browser-support, or a third-party shim) and asynchronous validation.
More information about Regula is available here.
