AngularJS form validation issues

javascript angularjs validation angularjs-validation angularjs-forms
Sumit picture Sumit · Jul 20, 2015 · Viewed 15.3k times · Source

I am trying to do a simple form validation using angular js. But it doesnt seems to work and I am not getting what I am missing.

HTML

Now the issue is, I am expecting that if I start entering invalid email then it will show me error message "Email Invalid". But that doesn't happen.

Also when i put a debug before submitting blank form, it says "registerForm.$valid = true"

Any guess what am I missing. Any module that i need to include ?

Here is Plunker

Answer

NeoWang picture NeoWang · Jul 20, 2015

First, you need registerForm.email.$error.email to trigger the 'invalid email' alert.

Second, I guess you have to bind these input fields with ng-models, but I am not sure if this is necessary.

One more thing, add 'novalidate' to the form element.

 <div class="form-group">
      <input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-model="" >
      <div ng-show="registerForm.email.$error.email">Email Invalid</div>
 </div>

Related questions

show validation error messages on submit in angularjs

I have a form which need to show validation error messages if clicked submit. Here is a working plunker <form name="frmRegister" ng-submit="register();" novalidate> <div> <input placeholder="First Name" name="first_name" type="text" …

Read More
AngularJS: How do I manually set input to $valid in controller?

Using the TokenInput plugin and using AngularJS built-in formController validation. Right now I'm trying to check if the field contains text, and then set field to valid if it does. The issue with using the plugin is it creates it's …

Read More
How to validate inputs dynamically created using ng-repeat, ng-show (angular)

I have a table that is created using ng-repeat. I want to add validation to each element in the table. The problem is that each input cell has the same name as the cell above and below it. I attempted …

Read More