如何仅在提交时验证表单并以警告形式显示错误消息?

时间:2015-07-03 06:51:02

标签: javascript angularjs forms

我想创建一个只在用户点击提交按钮时检查验证的表单,而且错误应该像bootstrap类型弹出或警告一样,我对角度很新,我没有得到如何实现它。< / p>

这是我的表格

<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" novalidate>

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

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

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

                    <div class="rgt-input-box fl"><span class="user-icon action-icon"></span><input type="text" 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" 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.maxLength">
                        Enter Max 5 characters only
                    </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>

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


            </form>

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

        </div>

</div>

1 个答案:

答案 0 :(得分:0)

我有这样的尝试,在单击提交按钮并创建提交的变量并在studentSubmit函数中将其设置为true后,在表单内的div中显示验证,现在我希望这些消息显示在警告框中屏幕让我了解如何做到这一点

    from somewhere import create_app
    app = create_app(<your_config>)