Validate form field only on submit or user input

Question

I have form fields that are validated using required  The problem is  that the error is displayed immediately when the form is rendered  I want it only to be displayed after the user actually typed in the text field  or on submit   How can I implement this

User · Answer

You can use angularjs form state form  submitted   Initially form  submitted value will be false and will became true after successful form submit

User · Answer

If you want to show error messages on form submission  you can use condition form  submitted to check if an attempt was made to submit the form  Check following example    lt form name  myForm  novalidate ng-submit  myForm  valid  amp  amp  createUser    gt     lt input type  text  name  name  ng-model  user name  placeholder  Enter name of user  required gt     lt div ng-messages  myForm name  error  ng-if  myForm  submitted  gt       lt div ng-message  required  gt Please enter user name  lt  div gt     lt  div gt      lt input type  text  name  address  ng-model  user address  placeholder  Enter Address  required ng-maxlength  30  gt     lt div ng-messages  myForm name  error  ng-if  myForm  submitted  gt       lt div ng-message  required  gt Please enter user address  lt  div gt       lt div ng-message  maxlength  gt Should be less than 30 chars lt  div gt     lt  div gt      lt button type  submit  gt      Create user    lt  button gt   lt  form gt

User · Answer

Invoking of validation on form element could be handled by triggering change event on this element   a  exemple  trigger change on separated element in form   scope formName elementName   element change      b  exemple  trigger change event for each of form elements for example on ng-submit  ng-click  ng-blur      vm triggerChangeForFormElements   function            trigger change event for each of form elements     angular forEach  scope formName  function  element  name            if   name startsWith                     element   element change                           c  and one more way for that      var handdleChange   function form           var formFields   angular element form  0    controls          angular forEach formFields  function field               field   element change

User · Answer

Erik Aigner   Please use  dirty The field has been modified  and  invalid  The field content is not valid    Please check below examples for angular form validation  1   Validation example HTML for user enter inputs    lt form  ng-app  myApp   ng-controller  validateCtrl  name  myForm  novalidate gt     lt p gt Email  lt br gt       lt input type  email  name  email  ng-model  email  required gt       lt span ng-show  myForm email  dirty  amp  amp  myForm email  invalid  gt         lt span ng-show  myForm email  error required  gt Email is required  lt  span gt         lt span ng-show  myForm email  error email  gt Invalid email address  lt  span gt         lt  span gt     lt  p gt       lt  form gt    2   Validation example HTML Js for user submits           lt form  ng-app  myApp   ng-controller  validateCtrl  name  myForm  novalidate form-submit-validation    gt         lt p gt Email  lt br gt           lt input type  email  name  email  ng-model  email  required gt           lt span ng-show  submitted    myForm email  dirty  amp  amp  myForm email  invalid  gt             lt span ng-show  myForm email  error required  gt Email is required  lt  span gt             lt span ng-show  myForm email  error email  gt Invalid email address  lt  span gt             lt  span gt         lt  p gt   lt p gt     lt input type  submit  gt   lt  p gt   lt  form gt    Custom 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                                                                                                            3   you don t want use directive use ng-change function like below      lt form  ng-app  myApp   ng-controller  validateCtrl  name  myForm  novalidate ng-change  submitFun    gt         lt p gt Email  lt br gt           lt input type  email  name  email  ng-model  email  required gt           lt span ng-show  submitted    myForm email  dirty  amp  amp  myForm email  invalid  gt             lt span ng-show  myForm email  error required  gt Email is required  lt  span gt             lt span ng-show  myForm email  error email  gt Invalid email address  lt  span gt             lt  span gt         lt  p gt   lt p gt     lt input type  submit  gt   lt  p gt   lt  form gt    Controller SubmitFun   JS    var app   angular module  example         app controller  exampleCntl   function  scope      scope submitFun   function  event      scope submitted   true    if    scope myForm  valid                event preventDefault

User · Answer

Use  dirty flag to show the error only after user interacted with the input    lt div gt     lt input type  email  name  email  ng-model  user email  required   gt     lt span ng-show  form email  dirty  amp  amp  form email  error required  gt Email is required lt  span gt   lt  div gt    If you want to trigger the errors only after the user has submitted the form than you may use a separate flag variable as in    lt form ng-submit  submit    name  form  ng-controller  MyCtrl  gt     lt div gt       lt input type  email  name  email  ng-model  user email  required   gt       lt span ng-show   form email  dirty    submitted   amp  amp  form email  error required  gt        Email is required      lt  span gt     lt  div gt      lt div gt       lt button type  submit  gt Submit lt  button gt     lt  div gt   lt  form gt    function MyCtrl  scope      scope submit   function           Set the  submitted  flag to true      scope submitted   true         Send the form to server         http post               Then  if all that JS inside ng-showexpression looks too much for you  you can abstract it into a separate method   function MyCtrl  scope      scope submit   function           Set the  submitted  flag to true      scope submitted   true         Send the form to server         http post             scope hasError   function field  validation       if validation         return   scope form field   dirty  amp  amp   scope form field   error validation        scope submitted  amp  amp   scope form field   error validation              return   scope form field   dirty  amp  amp   scope form field   invalid       scope submitted  amp  amp   scope form field   invalid               lt form ng-submit  submit    name  form  gt     lt div gt       lt input type  email  name  email  ng-model  user email  required   gt       lt span ng-show  hasError  email    required    gt required lt  span gt     lt  div gt      lt div gt       lt button type  submit  gt Submit lt  button gt     lt  div gt   lt  form gt

[angularjs] Validate form field only on submit or user input

Examples related to angularjs