Awesome
Schema based Angular JS Validation
angular-validation is damn neat in terms of validating your forms. I personally hate making my html too much declarative especially for long forms.
Schema validator is a provider on top of angular-validation letting you control from forms using schema.
Example
// Angular validation
var app = angular.module('yourApp', ['validation', 'validation.rule']);
// Now injecting valiation.schema
var app = angular.module('yourApp', ['validation', 'validation.rule','validation.schema']);
Your Schema
// Defining schema
var Author = {
firstname: {
'validations': 'required',
'validate-on': 'submit',
'messages':{
'required': {
'error':'We need it',
'success': 'All good'
}
}
},
url:{
'validations': 'required,url',
'validate-on': 'submit',
'messages':{
'required': {
'error':'We need it',
'success': 'All good'
},
'url':{
'error':'It must be a url'
}
}
}
};
app.config(function(validationSchemaProvider){
validationSchemaProvider.set("Author",Author);
});
Your html
<form name="Form" validation-schema schema="Author">
<div class="row">
<div>
<label>Required</label>
<input type="text" name="required" ng-model="form.required">
</div>
<div>
<label>Url</label>
<input type="text" name="url" ng-model="form.url">
</div>
<button validation-submit="Form" ng-click="next()">Submit</button>
<button validation-reset="Form">Reset</button>
</div>
</form>
Global Validations
At times we have similar validations on most of the fields and it is very frustating to add same validations on all the fields.
Using globals inside your schema you can add global rules on all mentioned fields.
var Author = {
globals: {
'validations': 'required',
'validate-on': 'submit',
'messages':{
'required': {
'error':'We need it',
'success': 'All good'
}
}
},
firstname: {
},
url:{
'validations': 'required,url'
}
};
You see how much we have cut down by using globals, as they apply rules globally on all fields.
Tiny Templating
We all like personalized error messages, and using globals it will be difficult to show personalized
messages. So by using this tiny helper %field%
you can print field name.
So %field% is required on firstname
with turn out to be firstname is required
.
Plunker
That's All
That is all you need , rest of the stuff will work as specified in angular-valiation docs , it is just a provider to remove validations from html to schema.