2017 © Pedro Peláez
 

library ng-remote-validate

image

bazaglia/ng-remote-validate

  • by bazaglia
  • Repository
  • 1 Watchers
  • 0 Stars
  • 742 Installations
  • JavaScript
  • 0 Dependents
  • 0 Suggesters
  • 24 Forks
  • 0 Open issues
  • 0 Versions
  • 0 % Grown

The README.md

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., (*1)

Features:, (*2)

  • Drop in solution for Ajax validation of any text or password input, (*3)

  • Works with Angulars built in validation and can be accessed at formName.inputName.$error.ngRemoteValidate, (*4)

  • Throttles server requests (default 400ms) and can be set with ng-remote-throttle="550", (*5)

  • Allows HTTP method definition (default POST) with ng-remote-method="GET", (*6)

Getting started - Example

Adding ngRemoteValidate to your project, (*7)

bower install ng-remote-validate

OR, (*8)

Grab either the minified version or the standard source from the release folder and add it to your project., (*9)

<script type="text/javascript" src="../your/path/ngRemoteValidate.js"></script>

Include ngRemoteValidate in you Angular app, (*10)

var app = angular.module( 'myApp', [ 'remoteValidation' ] );

Using it in your forms, (*11)

This will be a basic change password form that requires the user to enter their current password as well as the new password., (*12)



Change password
Required Incorrect current password. Please enter your current account password. New and confirm do not match

Options

There are a few defaults that can be overwritten with options. They are:, (*13)

  • ng-remote-validate 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, (*14)

<input type="password" 
       name="currentPassword" 
       placeholder="Current password" 
       ng-model="password.current" 
       ng-remote-validate="/customer/validpassword"
       ng-remote-throttle="550"
       ng-remote-method="GET"
       required>

<input type="text" 
       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>

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:, (*15)

<span class="message" ng-show="myForm.inputName.$pending">validating...</span>

...

<button type="submit" ng-disabled="myForm.$invalid || myForm.$pending" ng-click="...">Go!</button>

Server side

Data sent to the server, (*16)

By default, ngRemoteValidate will send a simple JSON string to the server formatted like so:, (*17)

{ "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., (*18)

$scope.currentPasswordSetArgs = function( val, el, attrs, ngModel ) {
    return { value: val, otherData: attrs.otherData };
};

Server response, (*19)

ngRemoteValidate wants a specific JSON response from your servers. The response should look as follows:, (*20)

{
    isValid: bool, //Is the value received valid 
    value: 'myPassword!' //value received from server
}

The Versions