how to show errors in alert boxes after click of submit button using angular js?

Question

i have a form on whose submit button i want to show errors in alert form , here is my code.right now i am showing errors in different divs i want to show all the required errors in one alert .i am not getting any clue how to do this.

<div class="main-container version-msg-wrapp loginpage-bg">
    <div class="login-inner-container">
        <div class="logo-cont"></div>
        <div class="inputs-container">
            <form name="userLogin"  ng-submit="submitForm(userLogin.$valid)" novalidate>

                <div class="input-element-row">

                    <div class="rgt-input-box fl"><span class="center-icon action-icon"></span><input type="text"  id="c_code" ng-model="Nuser.centerCode" placeholder="Center Code" name="centerCode" value=""   ng-minlength=3
                                                                                                      ng-maxlength=5 required/></div>
                    <div class="cb">
                    </div>
                </div>

                <div class="input-element-row">
                    <div class="rgt-input-box fl"><span class="user-icon action-icon"></span><input type="text" id="u_id" placeholder="User ID"  ng-model="Nuser.userID" name="userID" value="" ng-maxlength="20" required/></div>
                    <div class="cb"></div>
                </div>


                <div class="input-element-row">
                    <div class="rgt-input-box fl"><span class="pswd-icon action-icon"></span><input type="password" id="pwd" placeholder="Password" ng-model="busyUser.password" name="password" value="" required /></div>
                    <div class="cb"></div>
                </div>

                <div class="input-element-row">
                    <button type="button" name="" value="" ng-click="StudentSubmit()">Login</button>
                </div>

                <div ng-show="submitted && userLogin.centerCode.$dirty && userLogin.$invalid" class="alert alert-danger">
                    <div ng-show="userLogin.centerCode.$error.required">
                        Center code is required.
                    </div>
                    <div ng-show="userLogin.centerCode.$error.minlength">
                        Enter min 3 characters
                    </div>
                    <div ng-show="userLogin.centerCode.$error.maxlength">
                        Enter max 5 characters
                    </div>
                </div>

                <div ng-show=" submitted && userLogin.userID.$dirty && userLogin.userID.$invalid " class="alert alert-danger">
                    <div ng-show="userLogin.userID.$error.required">
                        User Id is required.
                    </div>
                    <div ng-show="userLogin.centerCode.$error.maxlength">
                        Enter Max 20 characters only
                    </div>
                </div>

                <alert ng-show="submitted && userLogin.password.$dirty && userLogin.password.$invalid" class="alert alert-danger">
                    <alert ng-show="userLogin.password.$error.required">
                        enter password
                    </alert>

                </alert>

            </form>

    <div class="input-element-row">
        <div class="forgot-pass"><a href="#/forgotPassword">Forgot password?</a></div>
    </div>

</div>

</div>
</div>

SuperVeetz · Accepted Answer · 2015-07-06 06:02:54Z

1

your input should look like this

<input type="text" id="u_id" placeholder="User ID" ng-model="Nuser.userID" name="u_id" value="" maxlength="20" minlength="4" required/>

and you can show the alert like this

<div ng-show="userLogin.$submitted && userLogin.u_id.$invalid">
                    User Id is required.
                </div>

Bootstrap form with angularJS validation:

           <div class="form-group">

              <label class="col-sm-2 control-label" for="contactEmail">Email:</label>

              <div class="col-sm-4 col-sm-push-6">
                <div class="alert alert-danger" role="alert"
                      ng-show="contactForm.$submitted && contactForm.contactEmail.$invalid">
                  <strong><i class="fa fa-exclamation"></i> Error:&nbsp; </strong>
                  <span class="alert-inner">Email is too short.</span>
                </div>
              </div>

              <div class="col-sm-6 col-sm-pull-4">
                <input type="email" class="form-control" id="contactEmail" name="contactEmail"
                       placeholder="Ex. [email protected]"
                       maxlength="40" ng-model="contactMessage.email" required>
              </div>

            </div>

edited Jul 6, 2015 at 6:02

answered Jul 6, 2015 at 5:55

SuperVeetz

2,1483 gold badges25 silver badges38 bronze badges

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

1 Comment

Anky Over a year ago

this is not an alert its just a div showing the information , i want to create a bootstrap type alert for showing this message

Collectives™ on Stack Overflow

how to show errors in alert boxes after click of submit button using angular js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related