A simple replacement for ASP.NET MVC unobtrusive validation without dependencies on other frameworks.
Although it is quite possible to just download the minified script from the dist folder of this repo, Validatrix is designed to be custom built for each project. Hence, it is recommended you clone the repo, add the development version of validatrix (validatrix.dev.js) to your project and then remove the components you are not using from the build/production.js
file and build your own version.
Once you have included the script on your page, initialize Validatrix like this:
var validator = validatrix.init(formToValidate, {
oninvalid: fieldInvalidHandler,
onvalid: fieldValidHandler
});
formToValidate.onsubmit = function(e) {
if(!validator.validate(e.target || e.srcElement)) {
e.preventDefault();
}
};
Like jQuery unobtrusive validation, Validatrix looks at data-val-*
attributes, finds the corresponding validator and hooks it up.
Validatrix requires querySelector
so Internet Explorer 8 and up plus modern browsers should all work.
Validatrix comes with default handlers for invalid and valid fields, but you are encouraged to roll your own that do exactly what you want. There are two possibilities here; either build them similarly to events/defaultValidationEvents.js
or attach them on a case by case basis using the oninvalid
/onvalid
options:
var validator = validatrix.init(form, {
oninvalid: customInvalidHandler,
onvalid: customValidHandler
});
element
(HTMLElement) the invalid elementerrorMessage
(String) the error message to display
element
(HTMLElement) the valid element
Validatrix comes with a very limited number of validators per default. This is by design to keep it small and lean, but it means you may have to write your own validators. Luckily, that isn't very complicated. Create a new file in src/validators
, add this and change the name of the validator:
//>>excludeStart("exclude", pragmas.exclude);
define(['validatrix'], function(){
//>>excludeEnd("exclude");
validatrix.validators.myvalidator = function(element, options) {
var errorMessage = element.getAttribute('data-val-myvalidator');
return function(value) {
return (errorMessage if value is invalid, undefined otherwise);
};
};
//>>excludeStart("exclude", pragmas.exclude);
});
//>>excludeEnd("exclude");
You can now validate fields with a data-val-myvalidator="Invalid message for myvalidator"
attribute.
If your custom validator is easy to express as a regular expression, you can call the regex validator with an override pattern:
validatrix.validators.myvalidator = function(element, options) {
var errorMessage = element.getAttribute('data-val-myvalidator');
return validatrix.validators.regex(element, options, 'myvalidator(?: pattern)?', errorMessage);
};