AngularJS validations not working?

Question

I am new to AngularJS and I just started to tweak around the validations that come with it but I can't get them to work for some reason:

<div class="row">
    <div class="col-xs-6">
        <h2>Login</h2>
        <p class="text-danger">{{message}}</p>
        <form name="form" novalidate>
            <label>Email: </label>
            <input type="email" ng-model="credentials.email" placeholder="Email" class="form-control" required />
            <label>Password: </label>
            <input type="password" ng-model="credentials.password" placeholder="Password" class="form-control" />
            <br />
            <button class="btn btn-primary" ng-click="authenticate(credentials)">Login</button>
            <a href="#/register">Register</a>
        </form>
    </div>
</div>

I named the form and put the novalidate also. Then I tried to have the email input as required but putting the attribute there. But the form still submits and AngularJS does not stop it from submitting or shows any warnings. What am I missing?

Enable/disable button based on form validity.

Mikko Viitala
– Mikko Viitala

2015-01-15 07:53:58 +00:00
Commented Jan 15, 2015 at 7:53 — Mikko Viitala
– Mikko Viitala, Commented Jan 15, 2015 at 7:53

squiroid · Accepted Answer · 2015-01-15 07:54:30Z

1

Provide name field to your input

 <form name="form" novalidate>
            <label>Email: </label>
            <input type="email" name="email" ng-model="credentials.email" placeholder="Email" class="form-control" required />
            <label>Password: </label>
            <input type="password" ng-model="credentials.password" placeholder="Password" class="form-control" />
            <br />
            <button class="btn btn-primary" ng-disabled="form.$invalid" ng-click="authenticate(credentials)">Login</button>
            <a href="#/register">Register</a>
        </form>

And here is the plunker :-) http://plnkr.co/edit/pAA2wBp8zgIZV6QLwO7S?p=preview

answered Jan 15, 2015 at 7:54

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

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

2 Comments

Rohan Over a year ago

So Angular does not show warnings automatically? It just pushes the classes ng-invalid, ng-pristine, ng-dirty and so on. I thought it worked similar to bootstrap?

squiroid Over a year ago

Yes exactly you have to validate it by yourself ,it just throw errors:-)

shanidkv · Accepted Answer · 2015-01-15 07:54:01Z

0

Remove required attribute from email input if you want to make optional.

<input type="email" ng-model="credentials.email" placeholder="Email" class="form-control"/>

If you want to remove email validation change the field type.

HTML5 always validate email if you make type="email"

<input type="text" ng-model="credentials.email" placeholder="Email" class="form-control"/>

edited Jan 15, 2015 at 7:54

answered Jan 15, 2015 at 7:48

shanidkv

1,1031 gold badge9 silver badges12 bronze badges

2 Comments

Rohan Over a year ago

Still not working. That did not even make sense? I have tried inserting required at password also. Still nothing.

shanidkv Over a year ago

Updated answer. Please check

Collectives™ on Stack Overflow

AngularJS validations not working?

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related