sanji-validator

AngularJS form validation

Demo

http://sanji-io.github.io/sanji-validator

#Table of contents

• Requirements
• Browser Support
• Quick Configuration
• sanjiValidatorConfig provider
  • setValidators
  • setValidMethod
• sanjiValidator directive
• sanjiValidatorMethod directive
• sanjiValidatorSubmit directive
• beforeElementSelector attribute

Requirements

• jQuery
• AngularJS
• lodash

Browser Support

• Chrome
• Firefox

Quick Configuration

bower install sanji-validator

This will copy the sanji-validator files into a bower_components folder, along with its dependencies. Load the script files in your application:

<script src="bower_components/sanji-validator/dist/sanji-validator.js"></script>

angular.module('yourApp', ['sanji.validator']);

sanjiValidatorConfig provider

properties

setValidators

Array: Specifies the validators.

setValidMethod

String: Default to be watch for global. Can be defined as watch, blur or submit.

usage

angular.module('yourApp')
.run(function(sanjiValidatorConfig) {

  sanjiValidatorConfig.setValidators({

    range: {
      rule: function(value, minlength, maxlength) {    // this field shoud have minlength and maxlength HTML attribute
        var length = value.length;
        return (minlength <= length) && (length <= maxlength);
      },
      error: "The value should be in range ({{minlength}} ~ {{maxlength}})"
    },

    required: {
      error: "This field is required."
    },

    ip: {
      // rule can be defined as RegExp or function
      rule: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
      error: "This ip format is invalid."
    }
  });
  sanjiValidatorConfig.setValidMethod('blur');    // set global field validate method
});

sanjiValidator directive

String: a comma separated string which represents the names of validators

Usage

<form ng-submit="submit()" name="form">
  <label>
    <span>IP: </span>
    <input type="text" ng-model="row.ip" sanji-validator="ip,required">
  </label>
  <label>
    <span>Desc: </span>
    <input type="text" ng-model="row.desc" minlength="10" maxlength="30" sanji-validator="range,required">
  </label>
  <button type="submit" ng-disabled="form.$invalid">Save</button>
</form>

sanjiValidatorMethod directive

String: define the validate method of this form

sanjiValidatorSubmit directive

put this if you want to validate before ngSubmit.

Usage

<form ng-submit="submit()" name="form" sanji-validator-method="blur" sanji-validator-submit>
  <label>
    <span>IP: </span>
    <input type="text" ng-model="row.ip" sanji-validator="ip,required">
  </label>
  <button type="submit" ng-disabled="form.$invalid">Save</button>
</form>

beforeElementSelector attribute

If you want your message appears next to certain HTML tag, define before-element-selector attribute.

Usage

<div class="input-group">
  <input name="idleTime" 
         type="text"
         class="form-control"
         ng-model="current.cellular.idleTime"
         before-element-selector=".input-group"
         sanji-validator="number,required">
  <span class="input-group-addon">sec.</span>
</div>