Angularjs form validation on Form Submission

Question

I am new to AngularJS. I have developed a simple Angular UI Modal form and I am trying to validate the form on form submission i.e. when end user click the submit button. I followed an video lecture that uses a Angular directive to validate the fields that places 'has-error' class on the parent element. please the images for the clarification.

Angular Form

Error Directive

HTML Template

I want the messages Full Name is required , A valid email is required should only be displayed when either Save button is clicked or the input controls fires up the blur event. please guide what I am missing here....

ojus kulkarni · Accepted Answer · 2016-02-09 17:35:57Z

0

Try this one :

E-mail:
<input type="email" ng-model="user.email" name="uEmail" required="" />

<div ng-show="form.$submitted || form.uEmail.$touched">
  <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
  <span ng-show="form.uEmail.$error.email">A valid email.is required</span>
</div>

answered Feb 9, 2016 at 17:35

ojus kulkarni

1,9073 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hamad Salahuddin Over a year ago

I would approve your suggestion as an answer. Here I would like to share that I am experiencing a weird behavior of my application which I have understood a bit. Its the blur event in the Error directive for toggling has-error class. There comes a situation when I enter something move and next input, comes back to first one and make it empty then the validation shows up but 'has-error's class is only added when i move to next control i.e. until blur event is fire.

Igor · Accepted Answer · 2016-02-09 17:08:52Z

0

Update the ng-if in your error message span tags

ng-if="(employeeForm.fullName.$isDirty || employeeForm.$submitted) && <rest of your validation>"

This will then eval to true if the field has been entered by the user OR the form has been submitted.

answered Feb 9, 2016 at 17:08

Igor

62.5k10 gold badges111 silver badges181 bronze badges

Collectives™ on Stack Overflow

Angularjs form validation on Form Submission

Angular Form

Error Directive

HTML Template

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Angular Form

Error Directive

HTML Template

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related