Prevent form validation running for angularjs page

Question

I have a simple form on my web app asking for username and password. I have used the standard angularjs validation.

But when i load the page the validation messages appear straight away. Not sure why this is. I have my final form markup below

 <div ng-controller="LoginCtrl">
    <form name ="loginForm" novalidate>
        <div class="input-group" style="margin-left:100px;">
            <input id="username" type="text" name="username" ng-model="user.name" class="form-control" placeholder="Username" required>
            <span class="alert-danger" ng-show="loginForm.username.$error.required">Username is required.</span>
            <input id="password "type="password" name="password" ng-model="user.password" class="form-control" placeholder="Password" required>
            <span class="alert-danger" ng-show="loginForm.password.$error.required">Password is required.</span>
        </div>
        <input class="btn btn-lg btn-success" type="submit" id="submit" value="Login" ng-click="loginUser()" />
        <pre>Username={{list}}</pre>
    </form>
</div>

Any ideas?

francisco.preller · Accepted Answer · 2014-01-05 23:40:48Z

3

You need to let angular know not to display the message unless the $pristine value is gone (or the $dirty present) These special variables are injected into the AngularJS form to let it know that certain events have occurred.

For example, use the below code as example and adjust:

<span class="alert-danger" ng-show="loginForm.username.$error.required && loginForm.username.$dirty">Username is required.</span>
<span class="alert-danger" ng-show="loginForm.password.$error.required && loginForm.password.$dirty">Password is required.</span>

answered Jan 5, 2014 at 23:40

francisco.preller

6,6494 gold badges30 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Prevent form validation running for angularjs page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related