Input Validation in AngularJs Form

Question

Problem,

Somehow i can't get the validation right with AngularJs. I want just user input box to be red when required field is not present or wrong on submit.

I have create a Plunker http://plnkr.co/edit/0ea77wRG3EJC13c22LLn . I have created a very simple Plunker, just to understand.

<input type="text" name="email"  ng-model="userEmail" required>

Please help

Answer 1

Go through this tutorial on scotch.io . It will give you an introduction to form validation.

and if you want validation messages will be displayed on click of submit button use a flag. when you click on flag set the flag to true and use the conditions that were in angularJs like below

<div class="form-group" ng-class="{ 'has-error' : submitClicked && userForm.email.$invalid && !userForm.email.$pristine }">

and set the submitClicked flag to true on click of submit button

<button type="submit" class="btn btn-primary btn-large" ng-click="submitClicked=true">Submit</button>

and you can even try this link

Answer 2

Validation will not work if novalidate attribute is present in the form tag.

Remove it to work form validation on submit.