Ajax Validation for Angularjs#
ngRemoveValidate makes it easy for you to validate form fields agents data from your server. For example, a sign up form may need to check if the email entered is already registered before submitting the form.
Features:
-
Drop in solution for Ajax validation of any text or password input
-
Works with Angulars built in validation and can be accessed at
formName.inputName.$error.ngRemoteValidate
-
Throttles server requests (default 400ms) and can be set with
ng-remote-throttle="550"
-
Allows HTTP method definition (default POST) with
ng-remote-method="GET"
Getting started - Example##
Adding ngRemoteValidate to your project
bower install ng-remote-validate
OR
Grab either the minified version or the standard source from the release folder and add it to your project.
Include ngRemoteValidate in you Angular app
var app = angular;
Using it in your forms
This will be a basic change password form that requires the user to enter their current password as well as the new password.
Change password Current Required Incorrect current password. Please enter your current account password. New Confirm New and confirm do not match Change password
Options##
There are a few defaults that can be overwritten with options. They are:
ng-remote-validate
takes a string, an Array of string i.e.ng-remote-validate="/url/one"
orng-remote-validate="[ '/url/one', '/url/two' ]"
, or an Object of string/validation pairs i.e.ng-remote-validate="{ '/url/validate/unique' : 'unique', '/url/validate/blacklist' : 'blacklisted'}"
, which would respectively setformName.inputName.$error.unique
andformName.inputName.$error.blacklisted
in addition to the catch-allformName.inputName.$error.ngRemoteValidate
.ng-remote-throttle
(default: 400) Users inactivity length before sending validation requests to the serverng-remote-method
(default: 'POST') Type of request you would like to send
Example using all
ngRemote will add a $pending
property on your model and the containing form. You can use these to show loading animations and to disable the form submit button:
validating... ... Go!
Server side##
Data sent to the server
By default, ngRemoteValidate will send a simple JSON string to the server formatted like so:
"value": "inputValue"
If you would like to change what data is sent to the server, you can create an inputNameSetArgs
callback on your controllers $scope
. This callback should return the data you want sent to the server.
$scope { return value: val otherData: attrsotherData ;};
Server response
ngRemoteValidate wants a specific JSON response from your servers. The response should look as follows:
isValid: bool //Is the value received valid value: 'myPassword!' //value received from server