show validation error messages on submit in angularjs

Question

I have a form which need to show validation error messages if clicked submit   Here is a working plunker    lt form name  frmRegister  ng-submit  register     novalidate gt         lt div gt           lt input placeholder  First Name  name  first name  type  text  ng-model  user firstName  required   gt           lt span ng-show  frmRegister first name  dirty  amp  amp  frmRegister first name  error required  gt First Name is required lt  span gt         lt  div gt         lt div gt           lt input placeholder  Last Name  name  last name  type  text  ng-model  user lastName  required   gt           lt span ng-show  frmRegister last name  dirty  amp  amp  frmRegister last name  error required  gt Last Name is required lt  span gt         lt  div gt         lt div gt           lt input placeholder  Email  name  email  type  email  ng-model  user email  required   gt           lt span ng-show  frmRegister email  dirty  amp  amp  frmRegister email  error required  gt Email is required  lt  span gt           lt span ng-show  frmRegister email  dirty  amp  amp  frmRegister email  error email  gt Invalid Email address  lt  span gt         lt  div gt         lt input type  submit  value  Save    gt         lt span ng-show  registered  gt YOU ARE NOW REGISTERED USER lt  span gt    lt  form gt    Validation works normally when user start making changes  But it doesn t show any error messages If clicked submit without entering anything    Any thought of achieving this   Or in other way how can I make each input field  dirty when clicks the Submit button

User · Accepted Answer

I found this fiddle http   jsfiddle net thomporter ANxmv 2  which does a nifty trick to cause control validation   Basically it declares a scope member submitted and sets it true when you click submit  The model error binding use this extra expression to show the error message like  submitted  amp  amp  form email  error required     UPDATE  As pointed out in  Hafez s comment  give him some upvotes    the Angular 1 3  solution is simply   form  submitted  amp  amp  form email  error required

User · Answer

G45   I  faced same issue   i have created one directive   please check below hope it may be helpful  Directive        app directive  formSubmitValidation   function               return               require   form               compile  function  tElem  tAttr                     tElem data  augmented   true                    return function  scope  elem  attr  form                        elem on  submit   function   event                            scope  broadcast  form submit   form                            if   form  valid                                 event preventDefault                                                      scope  apply function                                  scope submitted   true                                                                                                            HTML     lt form  name  loginForm  class  c-form-login  action    method  POST  novalidate  novalidate  form-submit-validation    gt    lt div class  form-group  gt                                                   lt input type  email  class  form-control c-square c-theme input-lg  placeholder  Email  ng-model   username  name   username  required gt                                                   lt span class  glyphicon glyphicon-user form-control-feedback c-font-grey  gt  lt  span gt                                                   lt span ng-show  submitted    loginForm  username  dirty  amp  amp  loginForm  username  invalid  gt                                                       lt span ng-show  loginForm  username  invalid  class  error  gt Please enter a valid email  lt  span gt                                                   lt  span gt                                               lt  div gt   lt button type  submit  class  pull-right btn btn-lg c-theme-btn c-btn-square c-btn-uppercase c-btn-bold  gt Login lt  button gt   lt  form gt

User · Answer

I also had the same issue  I solved the problem by adding a ng-submit which sets the variable submitted to true    lt form name  form  ng-submit  submitted   true  novalidate gt   lt div gt       lt span ng-if  submitted  amp  amp  form email  error email  gt invalid email address lt  span gt        lt span ng-if  submitted  amp  amp  form email  error required  gt required lt  span gt       lt label gt email lt  label gt       lt input type  email  name  email  ng-model  user email  required gt   lt  div gt    lt div gt       lt span ng-if  submitted  amp  amp  form name  error required  gt required lt  span gt       lt label gt name lt  label gt       lt input type  text  name  name  ng-model  user name  required gt   lt  div gt    lt button ng-click  form  valid  amp  amp  save user   gt Save lt  button gt   lt  form gt    I like the idea of using  submitted  I think I ve to upgrade Angular to 1 3

User · Answer

Try this code    lt INPUT TYPE  submit  VALUE  Save  onClick  validateTester    gt    This funvtion will validate your result  function validateTester         var flag   true     var Tester   document forms Tester     if  Tester line1 value   JavaScript             alert  First box must say  JavaScript             flag   false               if  Tester line2 value   Kit             alert  Second box must say  Kit             flag   false               if  flag            alert  Form is valid  Submitting form              document forms Tester submit

User · Answer

I can come up with 2 ways to achieve it   The first one is to remove novalidate to enable the browser s validation   Second  you can disable the save button when the form is not valid like this   lt input ng-disabled   frmRegister  valid  type  submit  value  Save    gt    Hope it helps

User · Answer

There are two simple  amp  elegant ways to do it   Pure CSS     After first form submission  despite the form validity  Angular will add a ng-submitted class to all form elements inside the form just submitted   We can use  ng-submitted to controller our element via CSS   if you want to display an error text only when user have submitted e g    error   display  none    ng-submitted  error        display  block      Using a value from Scope  After first form submission  despite the form validity  Angular will set  your form name   submitted to true  Thus  we can use that value to control elements    lt div ng-show  yourFormName  submitted  gt error message lt  div gt   lt form name  yourFormName  gt  lt  form gt

User · Answer

You only need to check if the form is dirty and valid before submitting it  Checkout the following code    lt form name  frmRegister  data-ng-submit  frmRegister  valid  amp  amp  frmRegister  dirty   register     return false   novalidate gt          And also you can disable your submit button with the following change    lt input type  submit  value  Save  data-ng-disable  frmRegister  invalid     frmRegister  dirty    gt    This should help for your initial

User · Answer

Since I m using Bootstrap 3  I use a directive   see plunkr       var ValidSubmit      parse   function   parse            return               compile  function compile tElement  tAttrs  transclude                    return                       post  function postLink scope  element  iAttrs  controller                            var form   element controller  form                            form  submitted   false                          var fn    parse iAttrs validSubmit                           element on  submit   function event                                scope  apply function                                     element addClass  ng-submitted                                    form  submitted   true                                  if form  valid                                        fn scope    event event                                                                                                                          scope  watch function     return form  valid   function isValid                                if form  submitted    false  return                              if isValid                                    element removeClass  has-error   addClass  has-success                                  else                                   element removeClass  has-success                                    element addClass  has-error                                                                                                                                          app directive  validSubmit   ValidSubmit     and then in my HTML    lt form class  form-horizontal  role  form  name  form  novalidate valid-submit  connect    gt     lt div class  form-group  gt       lt div class  input-group col col-sm-11 col-sm-offset-1  gt         lt span class  input-group-addon input-large  gt  lt i class  glyphicon glyphicon-envelope  gt  lt  i gt  lt  span gt         lt input class  input-large form-control  type  email  id  email  placeholder  Email  name  email  ng-model  email  required  required  gt       lt  div gt       lt p class  col-sm-offset-3 help-block error  ng-show  form  submitted  amp  amp  form email  error required  gt please enter your email lt  p gt       lt p class  col-sm-offset-3 help-block error  ng-show  form  submitted  amp  amp  form email  error email  gt please enter a valid email lt  p gt     lt  div gt   lt  form gt    UPDATED  In my latest project  I use Ionic so I have the following  which automatically puts  valid or  invalid on the input-item s    directive  input      timeout   function   timeout      function findParent element  selector        selector   selector     item       var parent   element parent        while  parent  amp  amp  parent length          parent   angular element parent         if  parent hasClass selector             break                parent   parent  amp  amp  parent parent  amp  amp  parent parent              return parent         return       restrict   E       require      ngModel     form        priority  1      link  function  scope  element  attrs  ctrls          var ngModelCtrl   ctrls 0         var form   ctrls 1          if   ngModelCtrl    form  name      form     attrs type      radio     attrs type      checkbox             return                 function setValidClass             var parent   findParent element           if  parent  amp  amp  parent toggleClass              parent addClass  validated              parent toggleClass  valid   ngModelCtrl  valid  amp  amp   ngModelCtrl  dirty    form  submitted              parent toggleClass  invalid   ngModelCtrl  invalid  amp  amp   ngModelCtrl  dirty    form  submitted               timeout angular noop                            scope  watch function              return form  submitted           function  b  a            setValidClass                      var before   void 0        var update   function              before   element val   trim            ngModelCtrl  setViewValue before           ngModelCtrl  render            setValidClass                   element          on  focus   function  e              if  ngModelCtrl  pristine                element removeClass   blurred                                     on  blur   function  e              if  ngModelCtrl  dirty                setValidClass                element addClass   blurred                           on  change   function  e              if  form  submitted    element hasClass   blurred                  setValidClass                           on  paste   function  e              if  form  submitted    element hasClass   blurred                  setValidClass                                                     and then in the HTML        lt form name  form  novalidate  novalidate  ng-submit  auth signin form  vm   gt             lt label class  item item-input item-floating-label  gt               lt span class  input-label  gt Email lt  span gt               lt input type  email  placeholder  Email  ng-model  vm email  autofocus  true  required                gt             lt  label gt             lt button ng-if   posting  type  submit  class  item button-block item-balanced item-icon-right  call-to-action  gt Login lt i class  icon ion-chevron-right  gt  lt  i gt             lt  button gt    and in the controller     self signin   function  form  data        if   form  valid  return       Authentication emailLogin data              so  now  in the CSS  you can do stuff like    item valid  before      float  right      font-family   Ionicons       font-style  normal      font-weight  normal      font-variant  normal      text-transform  none      text-rendering  auto      line-height  1      -webkit-font-smoothing  antialiased      -moz-osx-font-smoothing  grayscale      color   66cc33      margin-right  8px      font-size  24px      content    f122       item invalid  before      float  right      font-family   Ionicons       font-style  normal      font-weight  normal      font-variant  normal      text-transform  none      text-rendering  auto      line-height  1      -webkit-font-smoothing  antialiased      -moz-osx-font-smoothing  grayscale      color   ef4e3a      margin-right  8px      font-size  24px      content    f12a           border-left  solid 2px  ef4e3a  important      border-right  solid 2px  ef4e3a  important         MUCH SIMPLER

User · Answer

My solution with bootstrap 3  http   jsfiddle net rimian epxrbzn9    lt form class  form  name  form  ng-app novalidate gt     lt div class  form-group  gt       lt input name  first name            type  text            class  form-control            ng-model  first name            placeholder  First Name            required   gt     lt  div gt     lt div class  form-group  gt       lt input name  last name            type  text            class  form-control            ng-model  last name            placeholder  Last Name            required   gt     lt  div gt      lt button     type  submit      class  btn btn-primary btn-large      ng-click  submitted true  gt        Submit    lt  button gt    lt div ng-show  submitted  amp  amp  form  invalid  class  alert alert-danger  gt     lt div ng-show  form first name  error required  gt      First Name is Required    lt  div gt     lt div ng-show  form last name  error required  gt      Last Name is Required    lt  div gt   lt  div gt    lt  form gt

User · Answer

This worked for me   lt form  name  myForm  class  css-form  novalidate ng-submit  Save myForm  invalid   gt   lt input type  text  name  uName  ng-model  User Name  required  gt   lt span ng-show  User submitted  amp  amp  myForm uName  error required  gt Name is required  lt  span gt   lt input ng-click  User submitted true  ng-disabled  User submitted  amp  amp  tForm  invalid  type  submit  value  Save    gt   lt  form gt     in controller  scope Save invalid    if invalid  return     save form

User · Answer

A complete solution to the validate form with angularjs  HTML is as follows     lt div ng-app  areaApp  ng-controller  addCtrler  gt           lt form class  form-horizontal  name  fareainfo  gt               lt div class  form-group  gt                     lt label for  input-areaname  class  col-sm-2 control-label  gt Area Name    lt  label gt                     lt div class  col-sm-4  gt                         lt input type  text  class  form-control  name  name  id  input-areaname  ng-model  Area Name  placeholder    required gt                         lt span class  text-danger  ng-show   fareainfo  submitted    fareainfo name  dirty   amp  amp  fareainfo name  error required  gt  Field is required lt  span gt                     lt  div gt               lt  div gt                lt div class  col-sm-12  gt                     lt button type  button  class  btn btn-primary pull-right  ng-click  submitAreaInfo    gt Submit lt  button gt                lt  div gt           lt  form gt       lt  div gt    AngularJS App and Controller is as follows  var areaApp   angular module  areaApp         areaApp controller  addCtrler   function   scope         scope submitAreaInfo   function               if   scope fareainfo  valid               after Form is Valid          else              scope fareainfo  setSubmitted                            Important Code Segments   ng-app  areaApp  ng-controller  addCtrler  Defines the angular app and controller ng-show   fareainfo  submitted    fareainfo name  dirty   amp  amp  fareainfo name  error required   Above condition ensure that whenever a user first sees the form there s no any validation error on the screen and after a user does changes to the form it ensure that validation message show on the screen   name  is the name attribute of the input element   scope fareainfo  valid Above code  segment check whether the form is valid whenever a user submits the form   scope fareainfo  setSubmitted    Above code  segment ensures that all validation messages are displayed on the screen whenever a user submits the form without doing anything

User · Answer

http   jsfiddle net LRD5x 30   A simple solution   HTML   lt form ng-submit  sendForm  event   ng-class  submitted submitted  gt    JS   scope sendForm   function  event       event preventDefault      scope submitted   true      CSS   submitted input ng-invalid not  focus        background-color   FA787E     input ng-invalid    alert      display none     submitted input ng-invalid    alert      display block

User · Answer

I like the solution from realcrowd the best   HTML    lt form role  form  id  form  name  form  autocomplete  off  novalidate rc-submit  signup    gt   lt div class  form-group  ng-class    has-error    rc form hasError form firstName    gt       lt label for  firstName  gt Your First Name lt  label gt       lt input type  text  id  firstName  name  firstName  class  form-control input-sm  placeholder  First Name  ng-maxlength  40  required  required  ng-model  owner name first   gt       lt div class  help-block  ng-show  rc form hasError form firstName   gt   rc form getErrMsg form firstName    lt  div gt   lt  div gt   lt  form gt    javascript     define custom submit directive var rcSubmitDirective      rcSubmit      parse   function   parse        return           restrict   A           require    rcSubmit     form            controller     scope   function   scope                this attempted   false               var formController   null               this setAttempted   function                     this attempted   true                              this setFormController   function controller                  formController   controller                              this hasError   function  fieldModelController                    if   formController  return false                   if  fieldModelController                        return fieldModelController  invalid  amp  amp  this attempted                    else                       return formController  amp  amp  formController  invalid  amp  amp  this attempted                                               this getErrMsg function ctrl                   var e ctrl  error                  var errMsg                  if  e required                       errMsg  Please enter a value                                     return errMsg                                    compile  function cElement  cAttributes  transclude                return                   pre  function scope  formElement  attributes  controllers                         var submitController   controllers 0                       var formController    controllers length  gt  1    controllers 1    null                       submitController setFormController formController                        scope rc   scope rc                            scope rc attributes name    submitController                                     post  function scope  formElement  attributes  controllers                         var submitController   controllers 0                       var formController    controllers length  gt  1    controllers 1    null                      var fn    parse attributes rcSubmit                        formElement bind  submit   function  event                            submitController setAttempted                            if   scope   phase  scope  apply                             if   formController  valid  return false                           scope  apply function                                 fn scope    event event                                                                                                              app directive rcSubmitDirective

[javascript] show validation error messages on submit in angularjs

Examples related to javascript

Examples related to validation

Examples related to angularjs