How to add custom validation to an AngularJS form

Question

I have a form with input fields and validation setup by adding the required attributes and such  But for some fields I need to do some extra validation  How would I  tap in  to the validation that FormController controls    Custom validation could be something like  if these 3 fields are filled in  then this field is required and needs to be formatted in a particular way    There s a method in FormController  setValidity but that doesn t look like a public API so I rather not use it  Creating a custom directive and using NgModelController looks like another option  but would basically require me to create a directive for each custom validation rule  which I do not want   Actually  marking a field from the controller as invalid  while also keeping FormController in sync  might be the thing that I need in the simplest scenario to get the job done  but I don t know how to do that

User · Answer

Some great examples and libs presented in this thread, but they didn't quite have what I was looking for. My approach: angular-validity -- a promise based validation lib for asynchronous validation, with optional Bootstrap styling baked-in.

An angular-validity solution for the OP's use case might look something like this:

<input  type="text" name="field4" ng-model="field4"
        validity="eval"
        validity-eval="!(field1 && field2 && field3 && !field4)"
        validity-message-eval="This field is required">

Here's a Fiddle, if you want to take it for a spin. The lib is available on GitHub, has detailed documentation, and plenty of live demos.

User · Answer

Custom Validations that call a Server Use the ngModelController  asyncValidators API which handles asynchronous validation  such as making an  http request to the backend  Functions added to the object must return a promise that must be resolved when valid or rejected when invalid  In-progress async validations are stored by key in ngModelController  pending  For more information  see AngularJS Developer Guide - Forms  Custom Validation   ngModel  asyncValidators uniqueUsername   function modelValue  viewValue      var value   modelValue    viewValue        Lookup user by username   return  http get   api users     value        then function resolved              username exists  this means validation fails        return  q reject  exists            function rejected              username does not exist  therefore this validation passes        return true               For more information  see  ngModelController  asyncValidators API  AngularJS Developer Guide - Forms  Custom Validation      Using the  validators API The accepted answer uses the  parsers and  formatters pipelines to add a custom synchronous validator  AngularJS 1 3  added a  validators API so there is no need to put validators in the  parsers and  formatters pipelines  app directive  blacklist   function         return         require   ngModel         link  function scope  elem  attr  ngModel                         ngModel  validators blacklist   function modelValue  viewValue                  var blacklist   attr blacklist split                     var value   modelValue    viewValue                var valid   blacklist indexOf value      -1                return valid                                       For more information  see AngularJS ngModelController API Reference -  validators

User · Answer

In AngularJS the best place to define Custom Validation is Cutsom directive  AngularJS provide a ngMessages module      ngMessages is a directive that is designed to show and hide messages   based on the state of a key value object that it listens on  The   directive itself complements error message reporting with the ngModel    error object  which stores a key value state of validation errors     For custom form validation One should use ngMessages Modules with custom directive Here i have a simple validation which will check if number length is less then 6 display an error on screen    lt form name  myform  novalidate gt                   lt table gt                       lt tr gt                           lt td gt  lt input name  test  type  text  required  ng-model  test  custom-validation gt  lt  td gt                           lt td ng-messages  myform test  error  gt  lt span ng-message  invalidshrt  gt Too Short lt  span gt  lt  td gt                       lt  tr gt                   lt  table gt               lt  form gt    Here is how to create custom validation directive  angular module  myApp    ngMessages             angular module  myApp    ngMessages    directive  customValidation  function                return              restrict  A               require   ngModel               link function  scope  element  attr  ctrl      4th argument contain model information               function validationError value     you can use any function and parameter name                                     if  value length  gt  6     if model length is greater then 6 it is valide state                                     ctrl  setValidity  invalidshrt  true                                       else                                     ctrl  setValidity  invalidshrt  false    if less then 6 is invalide                                      return value    return to display  error                                    ctrl  parsers push validationError     parsers change how view values will be saved in the model                                             setValidity is inbuilt function to set model state to valid invalid

User · Answer

Edit  added information about ngMessages     1 3 X  below   Standard form validation messages  1 0 X and above   Since this is one of the top results if you Google  Angular Form Validation   currently  I want to add another answer to this for anyone coming in from there      There s a method in FormController  setValidity but that doesn t look like a public API so I rather not use it     It s  public   no worries  Use it  That s what it s for  If it weren t meant to be used  the Angular devs would have privatized it in a closure   To do custom validation  if you don t want to use Angular-UI as the other answer suggested  you can simply roll your own validation directive   app directive  blacklist   function         return         require   ngModel         link  function scope  elem  attr  ngModel              var blacklist   attr blacklist split                    For DOM - gt  model validation           ngModel  parsers unshift function value                 var valid   blacklist indexOf value      -1               ngModel  setValidity  blacklist   valid                return valid   value   undefined                             For model - gt  DOM validation           ngModel  formatters unshift function value                 ngModel  setValidity  blacklist   blacklist indexOf value      -1                return value                                    And here s some example usage    lt form name  myForm  ng-submit  doSomething    gt      lt input type  text  name  fruitName  ng-model  data fruitName  blacklist  coconuts bananas pears  required  gt      lt span ng-show  myForm fruitName  error blacklist  gt        The phrase    data fruitName    is blacklisted lt  span gt      lt span ng-show  myForm fruitName  error required  gt required lt  span gt      lt button type  submit  ng-disabled  myForm  invalid  gt Submit lt  button gt   lt  form gt    Note  in 1 2 X it s probably preferrable to substitute ng-if for ng-show above  Here is an obligatory plunker link  Also  I ve written a few blog entries about just this subject that goes into a little more detail   Angular Form Validation  Custom Validation Directives  Edit  using ngMessages in 1 3 X  You can now use the ngMessages module instead of ngShow to show your error messages  It will actually work with anything  it doesn t have to be an error message  but here s the basics    Include  lt script src  angular-messages js  gt  lt  script gt  Reference ngMessages in your module declaration   var app   angular module  myApp     ngMessages      Add the appropriate markup    lt form name  personForm  gt     lt input type  email  name  email  ng-model  person email  required  gt      lt div ng-messages  personForm email  error  gt       lt div ng-message  required  gt required lt  div gt       lt div ng-message  email  gt invalid email lt  div gt     lt  div gt   lt  form gt     In the above markup  ng-message  personForm email  error  basically specifies a context for the ng-message child directives  Then  ng-message  required  and ng-message  email  specify properties on that context to watch  Most importantly  they also specify an order to check them in  The first one it finds in the list that is  truthy  wins  and it will show that message and none of the others   And a plunker for the ngMessages example

User · Answer

synergetic I think  blesh suppose to put function validate as below  function validate value        var valid   blacklist indexOf value      -1      ngModel  setValidity  blacklist   valid       return valid   value   undefined     ngModel  formatters unshift validate   ngModel  parsers unshift validate

User · Answer

I extended  Ben Lesh s answer with an ability to specify whether the validation is case sensitive or not  default   use     lt input type  text  name  fruitName  ng-model  data fruitName  blacklist  Coconuts Bananas Pears  caseSensitive  true  required  gt    code    angular module  crm directives        directive  blacklist         function              return               restrict   A               require   ngModel               scope                     blacklist                                   link  function   scope   elem   attrs  modelCtrl                     var check   function  value                        if    attrs casesensitive                            value    value  amp  amp  value toUpperCase    value toUpperCase     value                            scope blacklist     map  scope blacklist  function  item                                return  item toUpperCase    item toUpperCase     item                                                                       return    isArray  scope blacklist      scope blacklist indexOf value      -1                                       For DOM - gt  model validation                 modelCtrl  parsers unshift function  value                        var valid   check value                       modelCtrl  setValidity  blacklist   valid                        return value                                        For model - gt  DOM validation                 modelCtrl  formatters unshift function  value                        modelCtrl  setValidity  blacklist   check value                        return value

User · Answer

Angular-UI s project includes a ui-validate directive  which will probably help you with this   It let s you specify a function to call to do the validation   Have a look at the demo page  http   angular-ui github com   search down to the Validate heading   From the demo page    lt input ng-model  email  ui-validate   blacklist   notBlackListed   gt   lt span ng-show  form email  error blacklist  gt This e-mail is black-listed  lt  span gt    then in your controller   function ValidateCtrl  scope       scope blackList     bad domain com   verybad domain com       scope notBlackListed   function value        return  scope blackList indexOf value      -1

User · Answer

I recently created a directive to allow for expression-based invalidation of angular form inputs   Any valid angular expression can be used  and it supports custom validation keys using object notation   Tested with angular v1 3 8           directive  invalidIf    function              return               require   ngModel               link  function  scope  elm  attrs  ctrl                     var argsObject   scope  eval attrs invalidIf                    if   angular isObject argsObject                         argsObject     invalidIf  attrs invalidIf                                       for  var validationKey in argsObject                        scope  watch argsObject validationKey   function  newVal                            ctrl  setValidity validationKey   newVal                                                                                 You can use it like this    lt input ng-model  foo  invalid-if   fooIsGreaterThanBar   foo  gt  bar                                      fooEqualsSomeFuncResult   foo    someFuncResult      gt    Or by just passing in an expression  it will be given the default validationKey of  invalidIf     lt input ng-model  foo  invalid-if  foo  gt  bar   gt

User · Answer

You can use Angular-Validator   Example  using a function to validate a field   lt input  type    text      name    firstName      ng-model    person firstName      validator    myCustomValidationFunction form firstName   gt    Then in your controller you would have something like   scope myCustomValidationFunction   function firstName       if   firstName      John            return true          You can also do something like this    lt input  type    text          name    firstName          ng-model    person firstName          validator       field1  amp  amp  field2  amp  amp  field3            invalid-message     This field is required   gt     where field1 field2  and field3 are scope variables  You might also want to check if the fields do not equal the empty string   If the field does not pass the validator then the field will be marked as invalid and the user will not be able to submit the form   For more use cases and examples see  https   github com turinggroup angular-validator  Disclaimer  I am the author of Angular-Validator

User · Answer

Update   Improved and simplified version of previous directive  one instead of two  with same functionality    directive  myTestExpression      parse   function   parse        return           restrict   A           require   ngModel           link  function  scope  element  attrs  ctrl                var expr   attrs myTestExpression              var watches   attrs myTestExpressionWatch               ctrl  validators mytestexpression   function  modelValue  viewValue                    return expr    undefined     angular isString expr   amp  amp  expr length  lt  1      parse expr  scope     model  modelValue   view  viewValue        true                              if  angular isString watches                     angular forEach watches split      filter function  n    return   n      function  n                        scope  watch n  function                              ctrl  validate                                                                                     Example usage    lt input ng-model  price1          my-test-expression   model  gt  0          my-test-expression-watch  price2 someOtherWatchedPrice    gt   lt input ng-model  price2          my-test-expression   model  gt  10          my-test-expression-watch  price1          required   gt    Result  Mutually dependent test expressions where validators are executed on change of other s directive model and current model    Test expression has local  model variable which you should use to compare it to other variables   Previously   I ve made an attempt to improve  Plantface code by adding extra directive  This extra directive very useful if our expression needs to be executed when changes are made in more than one ngModel variables    directive  ensureExpression      parse   function  parse        return           restrict   A           require   ngModel           controller  function                 scope  true          link  function  scope  element  attrs  ngModelCtrl                scope validate   function                      var booleanResult    parse attrs ensureExpression  scope                   ngModelCtrl  setValidity  expression   booleanResult                               scope  watch attrs ngModel  function value                    scope validate                                           directive  ensureWatch      parse   function   parse        return           restrict   A           require   ensureExpression           link  function  scope  element  attrs  ctrl                angular forEach attrs ensureWatch split      filter function  n    return   n      function  n                    scope  watch n  function                          scope validate                                                               Example how to use it to make cross validated fields    lt input name  price1         ng-model  price1          ensure-expression  price1  gt  price2          ensure-watch  price2    gt   lt input name  price2          ng-model  price2          ensure-expression  price2  gt  price3          ensure-watch  price3    gt   lt input name  price3          ng-model  price3          ensure-expression  price3  gt  price1  amp  amp  price3  gt  price2          ensure-watch  price1 price2    gt    ensure-expression is executed to validate model when ng-model or any of ensure-watch variables is changed

User · Answer

You can use  ng-required for your validation scenario   if these 3 fields are filled in  then this field is required     lt div ng-app gt       lt input type  text  ng-model  field1  placeholder  Field1  gt       lt input type  text  ng-model  field2  placeholder  Field2  gt       lt input type  text  ng-model  field3  placeholder  Field3  gt       lt input type  text  ng-model  dependentField  placeholder  Custom validation          ng-required  field1  amp  amp  field2  amp  amp  field3  gt   lt  div gt

User · Answer

Here s a cool way to do custom wildcard expression validations in a form  from  Advanced form validation with AngularJS and filters     lt form novalidate    gt        lt input type  text  id  name  name  name  ng-model  newPerson name        ensure-expression   persons   filter  name  newPerson name  true  length     1  gt      lt  -- or in your case -- gt      lt input type  text  id  fruitName  name  fruitName  ng-model  data fruitName        ensure-expression   blacklist   filter  fruitName  data fruitName  true  length     1  gt   lt  form gt    app directive  ensureExpression      http     parse   function  http   parse        return           require   ngModel           link  function scope  ele  attrs  ngModelController                scope  watch attrs ngModel  function value                    var booleanResult    parse attrs ensureExpression  scope                   ngModelController  setValidity  expression   booleanResult                                           jsFiddle demo  supports expression naming and multiple expressions   It s similar to ui-validate  but you don t need a scope specific validation function  this works generically  and ofcourse you don t need ui utils this way

[angularjs] How to add custom validation to an AngularJS form?

Examples related to angularjs