Show red border for all invalid fields after submitting form angularjs

Question

I have a form in which I have some input fields  Some of them are required fields and some are email fields    I am using HTML5 required attribute for required fields and type  email  attribute for email fields   My question is after clicking on submit button i have to show red border for all the invalid fields    This is my form    lt form name  addRelation  gt     lt label gt First Name lt  label gt     lt input type  text  placeholder  First Name  data-ng-model  model firstName      id  FirstName  name  FirstName  required  gt  lt br  gt     lt span class  text-error  data-ng-show  addRelation submitted  amp  amp  addRelation FirstName  error required  gt first Name is required lt  span gt  lt br  gt     lt label gt Last Name lt  label gt     lt input type  text  placeholder  Last Name  data-ng-model  model lastName  id  LastName  name  LastName  required  gt  lt br  gt     lt span class  text-error  data-ng-show  addRelation submitted  amp  amp  addRelation LastName  error required  gt Last Name is required lt  span gt  lt br  gt     lt label gt Email lt  label gt     lt input type  email  placeholder  Email  data-ng-model  model email  id  Email  name  Email  required  gt  lt br  gt     lt span class  text-error  data-ng-show  addRelation submitted  amp  amp  addRelation Email  error required  gt Email address is required lt  span gt  lt br  gt     lt span class  text-error  data-ng-show  addRelation submitted  amp  amp  addRelation Email  error email  gt Email address is not valid lt  span gt  lt br  gt      lt input class  btn  data-ng-click  save model   type  button  value  SAVE    gt       lt  form gt    and my save function    scope save  function  model        if   scope addRelation  valid              form is valid- so save it to DB           else             if form is not valid set  scope addRelation submitted to true          scope addRelation submitted true                 Now  when i click on save button without filling anything all the errors spans  are getting displayed  But i want to show red border for all the invalid fields   I have tried following cases   input ng-dirty ng-invalid border 1px solid black     but this fails when a user click on submit button directly  without touching input fields   input ng-invalid border 1px solid black     this shows the red border as soon as user opens a signup form    Please help

User · Answer

you can use default ng-submitted is set if the form was submitted   https   docs angularjs org api ng directive form  example  http   jsbin com cowufugusu 1

User · Answer

Reference article  Show red color border for invalid input fields angualrjs  I used ng-class on all input fields like below   lt input type  text  ng-class   submitted newEmployee submitted   placeholder  First Name  data-ng-model  model firstName  id  FirstName  name  FirstName  required  gt    when I click on save button I am changing newEmployee submitted value to true you can check it in my question   So when I click on save  a class named submitted gets added to all input fields there are some other classes initially added by angularjs      So now my input field contains classes like this  class  ng-pristine ng-invalid submitted    now I am using below css code to show red border on all invalid input fields after submitting the form   input submitted ng-invalid     border 1px solid  f00      Thank you     Update   We can add the ng-class at the form element instead of applying it to all input elements  So if the form is submitted  a new class submitted  gets added to the form element  Then we can select all the invalid input fields using the below selector  form submitted  ng-invalid       border 1px solid  f00

User · Answer

I have created a working CodePen example to demonstrate how you might accomplish your goals   I added ng-click to the  lt form gt  and removed the logic from your button    lt form name  addRelation  data-ng-click  save model   gt       lt input class  btn  type  submit  value  SAVE    gt    Here s the updated template    lt section ng-app  app  ng-controller  MainCtrl  gt     lt form class  well  name  addRelation  data-ng-click  save model   gt       lt label gt First Name lt  label gt       lt input type  text  placeholder  First Name  data-ng-model  model firstName  id  FirstName  name  FirstName  required  gt  lt br  gt       lt span class  text-error  data-ng-show  addRelation submitted  amp  amp  addRelation FirstName  invalid  gt First Name is required lt  span gt  lt br  gt       lt label gt Last Name lt  label gt       lt input type  text  placeholder  Last Name  data-ng-model  model lastName  id  LastName  name  LastName  required  gt  lt br  gt       lt span class  text-error  data-ng-show  addRelation submitted  amp  amp  addRelation LastName  invalid  gt Last Name is required lt  span gt  lt br  gt       lt label gt Email lt  label gt       lt input type  email  placeholder  Email  data-ng-model  model email  id  Email  name  Email  required  gt  lt br  gt       lt span class  text-error  data-ng-show  addRelation submitted  amp  amp  addRelation Email  error required  gt Email address is required lt  span gt       lt span class  text-error  data-ng-show  addRelation submitted  amp  amp  addRelation Email  error email  gt Email address is not valid lt  span gt  lt br  gt       lt input class  btn  type  submit  value  SAVE    gt       lt  form gt   lt  section gt    and controller code   app controller  MainCtrl   function  scope         scope save   function model         scope addRelation submitted   true       if  scope addRelation  valid             submit to db       console log model          else         console log  Errors in form data                     I hope this helps

[forms] Show red border for all invalid fields after submitting form angularjs

Examples related to forms

Examples related to validation

Examples related to angularjs