Trigger validation of all fields in Angular Form submit

Question

I m using this method  http   plnkr co edit A6gvyoXbBd2kfToPmiiA p preview to only validate fields on blur  This works fine  but I would also like to validate them  and thus show the errors for those fields if any  when the user clicks the  submit  button  not a real submit but a data-ng-click call to a function   Is there some way to trigger validation on all the fields again when clicking that button

User · Answer

Based on Thilak s answer I was able to come up with this solution     Since my form fields only show validation messages if a field is invalid  and has been touched by the user I was able to use this code triggered by a button to show my invalid fields    x000D   x000D     Show trigger any validation errors for this step x000D  angular forEach vm rfiForm stepTwo  error  function error    x000D    angular forEach error  function field    x000D      field  setTouched    x000D        x000D      x000D     Prevent user from going to next step if current step is invalid x000D  if   vm rfiForm stepTwo  valid    x000D    isValid   false  x000D    x000D   lt  -- form field -- gt  x000D   lt div class  form-group  ng-class     has-error   rfi rfiForm stepTwo Parent Suffix  c  touched  amp  amp  rfi rfiForm stepTwo Parent Suffix  c  invalid    gt  x000D   x000D     lt  -- field label -- gt  x000D     lt label class  control-label  gt Suffix lt  label gt  x000D     lt  -- end field label -- gt  x000D     lt  -- field input -- gt  x000D     lt select name  Parent Suffix  c  class  form-control  x000D            ng-options  item value as item label for item in rfi contact Parent Suffixes  x000D            ng-model  rfi contact Parent Suffix  c    gt  x000D     lt  -- end field input -- gt  x000D     lt  -- field help -- gt  x000D     lt span class  help-block  ng-messages  rfi rfiForm stepTwo Parent Suffix  c  error  ng-show  rfi rfiForm stepTwo Parent Suffix  c  touched  gt  x000D       lt span ng-message  required  gt this field is required lt  span gt  x000D     lt  span gt    x000D     lt  -- end field help -- gt  x000D   lt  div gt  x000D   lt  -- end form field -- gt  x000D   x000D   x000D

User · Answer

One approach is to force all attributes to be dirty  You can do that in each controller  but it gets very messy  It would be better to have a general solution   The easiest way I could think of was to use a directive   it will handle the form submit attribute  it iterates through all form fields and marks pristine fields dirty  it checks if the form is valid before calling the submit function   Here is the directive  myModule directive  submit   function       return       restrict   A       link  function scope  formElement  attrs          var form        form   scope attrs name         return formElement bind  submit   function             angular forEach form  function field  name              if  typeof name      string   amp  amp   name match                         if  field  pristine                  return field  setViewValue field  value                                                 if  form  valid              return scope  apply attrs submit                                        And update your form html  for example     lt form ng-submit  justDoIt    gt    becomes     lt form name  myForm  novalidate submit  justDoIt    gt    See a full example here  http   plunker co edit QVbisEK2WEbORTAWL7Gu p preview

User · Answer

In case someone comes back to this later    None of the above worked for me  So I dug down into the guts of angular form validation and found the function they call to execute validators on a given field  This property is conveniently called  validate    If you have a named form myForm  you can programmatically call myForm my field  validate   to execute field validation  For example    lt div ng-form name  myForm  gt       lt input required name  my field  type  text  ng-blur  myForm my field  validate    gt   lt  div gt    Note that calling  validate has implications for your model  From the angular docs for ngModelCtrl  validate      Runs each of the registered validators  first synchronous validators and then asynchronous validators   If the validity changes to invalid  the model will be set to undefined  unless ngModelOptions allowInvalid is true  If the validity changes to valid  it will set the model to the last available valid  modelValue  i e  either the last parsed value or the last value set from the scope    So if you re planning on doing something with the invalid model value  like popping a message telling them so   then you need to make sure  allowInvalid is set to true for your model

User · Answer

I like the this approach in handling validation on button click     There is no need to invoke anything from controller   it s all handled with a directive    on github

User · Answer

Well  the angular way would be to let it handle validation  - since it does at every model change -  and only show the result to the user  when you want   In this case you decide when to show the errors  you just have to set a flag  http   plnkr co edit 0NNCpQKhbLTYMZaxMQ9l p preview  As far as I know there is a issue filed to angular to let us have more advanced form control  Since it is not solved i would use this instead of reinventing all the existing validation methods   edit  But if you insist on your way  here is your modified fiddle with validation before submit  http   plnkr co edit Xfr7X6JXPhY9lFL3hnOw p preview The controller broadcast an event when the button is clicked  and the directive does the validation magic

User · Answer

I done something following to make it work    lt form name  form  name  plantRegistrationForm  gt     lt div ng-class     has-error    form  submitted    form headerName  touched   amp  amp  form headerName  invalid    gt       lt div class  col-md-3  gt         lt div class  label-color  gt HEADER NAME           lt span class  red  gt  lt strong gt   lt  strong gt  lt  span gt  lt  div gt       lt  div gt       lt div class  col-md-9  gt         lt input type  text  name  headerName  id  headerName                ng-model  header headerName                maxlength  100                class  form-control  required gt         lt div ng-show  form  submitted    form headerName  touched  gt           lt span ng-show  form headerName  invalid                 class  label-color validation-message  gt Header Name is required lt  span gt         lt  div gt       lt  div gt     lt  div gt      lt button ng-click  addHeader form  header              type  button             class  btn btn-default pull-right  gt Add Header    lt  button gt    lt  form gt    In your controller you can do   addHeader form  header           let self   this          form  submitted   true                       You need some css as well    label-color               color   gray-color             has-error           label-color               color  rgb 221  25  29                      select2-choice ui-select-match select2-default               border-color   e84e40                   validation-message          font-size  0 875em             max-width           width  100           min-width  100

User · Answer

You can try this    x000D   x000D     The controller x000D   x000D   scope submitForm   function form   x000D         Force the field validation x000D       angular forEach form  function obj   x000D        if angular isObject obj   amp  amp  angular isDefined obj  setDirty   x000D           x000D         obj  setDirty    x000D          x000D          x000D           x000D          if  form  valid   x000D     x000D      scope myResource  save function data   x000D                 x000D         x000D      x000D    x000D   lt  -- FORM -- gt  x000D   x000D     lt form name  myForm   role  form  novalidate  novalidate  gt  x000D   lt  -- FORM GROUP to field 1 -- gt  x000D     lt div class  form-group  ng-class     has-error    myForm field1  invalid  amp  amp  myForm field1  dirty    gt  x000D         lt label for  field1  gt My field 1 lt  label gt  x000D           lt span class  nullable  gt   x000D           lt select name  field1  ng-model  myresource field1  ng-options  list id as list name for list in listofall  x000D            class  form-control input-sm  required gt  x000D               lt option value    gt Select One lt  option gt  x000D           lt  select gt  x000D           lt  span gt  x000D           lt div ng-if  myForm field1  dirty  ng-messages  myForm field1  error  ng-messages-include  mymessages  gt  lt  div gt  x000D     lt  div gt  x000D       x000D   lt  -- FORM GROUP to field 2 -- gt  x000D     lt div class  form-group  ng-class     has-error    myForm field2  invalid  amp  amp  myForm field2  dirty    gt  x000D       lt label class  control-label labelsmall  for  field2  gt field2 lt  label gt   x000D         lt input name  field2  min  1  placeholder    ng-model  myresource field2  type  number   x000D        class  form-control input-sm  required gt  x000D       lt div ng-if  myForm field2  dirty  ng-messages  myForm field2  error  ng-messages-include  mymessages  gt  lt  div gt  x000D     lt  div gt  x000D   x000D     lt  form gt  x000D   x000D   lt  --     -- gt  x000D   lt button type  submit  ng-click  submitForm myForm   gt Send lt  button gt  x000D   x000D   x000D

User · Answer

You can use Angular-Validator to do what you want  It s stupid simple to use   It will    Only validate the fields on  dirty or on submit Prevent the form from being submitted if it is invalid Show custom error message after the field is  dirty or the form is submitted   See the demo  Example   lt form angular-validator         angular-validator-submit  myFunction myBeautifulForm          name  myBeautifulForm  gt          lt  -- form fields here -- gt       lt button type  submit  gt Submit lt  button gt   lt  form gt    If the field does not pass the validator then the user will not be able to submit the form   Check out angular-validator use cases and examples for more information   Disclaimer  I am the author of Angular-Validator

User · Answer

To validate all fields of my form when I want  I do a validation on each field of   controls like this    angular forEach  scope myform   controls  function  field        field  validate

User · Answer

Note  I know this is a hack  but it was useful for Angular 1 2 and earlier that didn t provide a simple mechanism   The validation kicks in on the change event  so some things like changing the values programmatically won t trigger it  But triggering the change event will trigger the validation  For example  with jQuery       formField1   formField2   trigger  change

User · Answer

Here is my global function for showing the form error messages    function show validation erros form error object            angular forEach form error object  function  objArrayFields  errorName                angular forEach objArrayFields  function  objArrayField  key                    objArrayField  setDirty                                         And in my any controllers   if   scope form add sale  invalid          scope global show validation erros  scope form add sale  error

User · Answer

I know  it s a tad bit too late to answer  but all you need to do is  force all forms dirty  Take a look at the following snippet   angular forEach  scope myForm  error required  function field        field  setDirty          and then you can check if your form is valid using   if  scope myForm  valid          Do something        and finally  I guess  you would want to change your route if everything looks good     location path   somePath      Edit  form won t register itself on the scope until submit event is trigger  Just use ng-submit directive to call a function  and wrap the above in that function  and it should work

User · Answer

What worked for me was using the  setSubmitted function  which first shows up in the angular docs in version 1 3 20   In the click event where I wanted to trigger the validation  I did the following   vm triggerSubmit   function         vm homeForm  setSubmitted                That was all it took for me  According to the docs it  Sets the form to its submitted state   It s mentioned here

[forms] Trigger validation of all fields in Angular Form submit

Examples related to forms

Examples related to angularjs