Painless form validation for AngularJS. Powered by the jQuery Validation Plugin.
Download Angular Validate:
$ npm install jpkleemans-angular-validate
$ bower install jpkleemans-angular-validate
$ git clone https://github.com/jpkleemans/angular-validate.git
When using one of the last two methods make sure you also download the latest release of the jQuery Validation Plugin.
Include both jquery.validate.min.js
and angular-validate.min.js
in your HTML page:
<!-- jQuery scripts -->
<script src="https://github.com/jpkleemans/angular-validate/raw/master/path/to/jquery.min.js"></script>
<script src="https://github.com/jpkleemans/angular-validate/raw/master/path/to/jquery.validate.min.js"></script>
<!-- Angular scripts -->
<script src="https://github.com/jpkleemans/angular-validate/raw/master/path/to/angular.min.js"></script>
<script src="https://github.com/jpkleemans/angular-validate/raw/master/path/to/angular-validate.min.js"></script>
Inject the ngValidate
module as a dependency into your Angular application:
angular.module('myApp', ['ngValidate']);
Add the ng-validate directive to your form and pass the validation options as value:
<form name="registerform" ng-submit="register(registerform)" ng-validate="validationOptions">
<input type="email" name="email">
<input type="password" name="password">
</form>
Then set the validation options in your controller:
$scope.validationOptions = {
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
}
},
messages: {
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
},
password: {
required: "You must enter a password",
minlength: "Your password must have a minimum length of 6 characters"
}
}
}
Or (for simple forms) insert the options directly without using a controller:
<form name="simpleform" ng-submit="register(simpleform)" ng-validate="{rules: {name: "required"}}">
For all available options, see: http://jqueryvalidation.org/validate#validate-options
Now you can validate the form by calling validate()
on the form instance:
$scope.register = function (form) {
if(form.validate()) {
// Form is valid!
}
}
You can also pass your validation options as the first parameter of
validate()
.
$window.alert("There are " + form.numberOfInvalids() + " invalid fields.");
A set of standard validation rules is provided by the jQuery Validation Plugin:
More info: http://jqueryvalidation.org/documentation/#link-list-of-built-in-validation-methods
Angular Validate ships with a $validatorProvider, that you can use to configure default validation options and custom validation rules.
angular.module('myApp')
.config(function ($validatorProvider) {
$validatorProvider.setDefaults({
errorElement: 'span',
errorClass: 'help-block'
});
});
More info: http://jqueryvalidation.org/jQuery.validator.setDefaults
angular.module('myApp')
.config(function ($validatorProvider) {
$validatorProvider.addMethod("domain", function (value, element) {
return this.optional(element) || /^http:\/\/mydomain.com/.test(value);
}, "Please specify the correct domain for your documents");
});
More info: http://jqueryvalidation.org/jQuery.validator.addMethod
angular.module('myApp')
.config(function ($validatorProvider) {
$validatorProvider.setDefaultMessages({
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $validatorProvider.format("Please enter no more than {0} characters."),
minlength: $validatorProvider.format("Please enter at least {0} characters."),
rangelength: $validatorProvider.format("Please enter a value between {0} and {1} characters long."),
range: $validatorProvider.format("Please enter a value between {0} and {1}."),
max: $validatorProvider.format("Please enter a value less than or equal to {0}."),
min: $validatorProvider.format("Please enter a value greater than or equal to {0}.")
});
});
More info: http://jqueryvalidation.org/jQuery.validator.format