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.
npm install ng-remote-validate#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.
html
`
`
Include ngRemoteValidate in you Angular app
javascript
`
var app = angular.module( 'myApp', [ 'remoteValidation' ] );
`
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.
html
`Change password
ng-remote-validate
##Options##
There are a few defaults that can be overwritten with options. They are:
- takes a string, an Array of string i.e. ng-remote-validate="/url/one" or ng-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 set formName.inputName.$error.unique and formName.inputName.$error.blacklisted in addition to the catch-all formName.inputName.$error.ngRemoteValidate.
ng-remote-throttle
- (default: 400) Users inactivity length before sending validation requests to the server
ng-remote-method
- (default: 'POST') Type of request you would like to send
`
Example using all
html
`
name="currentPassword"
placeholder="Current password"
ng-model="password.current"
ng-remote-validate="/customer/validpassword"
ng-remote-throttle="550"
ng-remote-method="GET"
required>
name="email"
placeholder="Email address"
ng-model="email"
ng-remote-validate="[ '/customer/email-registered', '/customer/email-restricted' ]"
ng-remote-throttle="800"
ng-remote-method="POST"
required>
$pending
ngRemote will add a property on your model and the containing form. You can use these to show loading animations and to disable the form submit button:
`
html
`
...
`
##Server side##
Data sent to the server
By default, ngRemoteValidate will send a simple JSON string to the server formatted like so:
javascript
`
{ "value": "inputValue" }
inputNameSetArgs
If you would like to change what data is sent to the server, you can create an callback on your controllers $scope. This callback should return the data you want sent to the server.
`
javascript
`
$scope.currentPasswordSetArgs = function( val, el, attrs, ngModel ) {
return { value: val, otherData: attrs.otherData };
};
`
Server response
ngRemoteValidate wants a specific JSON response from your servers. The response should look as follows:
javascript
``
{
isValid: bool, //Is the value received valid
value: 'myPassword!' //value received from server
}