当输入验证失败Angularjs prevent表单提交 [英] Angularjs prevent form submission when input validation fails

问题描述

我正在写使用angularjs一些客户端输入验证检查用户名和密码不为空，比三个字符不再是简单的登录表单。请参见下面的code：

I'm writing a simple login form using angularjs with some client side input validation to check that the user name and password is not empty and longer than three characters. See the below code:

<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
    <fieldset>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
        </div>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-lock"></i></span>
            <input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
        </div>

        <div class="control-group">
            <input class="btn" type="submit" value="Log in">
        </div>

    </fieldset>
</form>

和控制器：

var controller = function($scope) {

    $scope.login = {
        submit: function() {

            Console.info($scope.login.username + ' ' + $scope.login.password);
        }
    }

};

的问题是，在 login.submit 功能将被调用即使输入无效。是否有可能prevent这种行为？

The problem is that the login.submit function will be called even if the input is not valid. Is it possible to prevent this behaviour?

作为一个方面说明，我可以提，我使用的引导和requirejs为好。

As a side note I can mention that I use bootstrap and requirejs as well.

推荐答案

您可以这样做：

<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">

无需控制器检查。

No need for controller checks.

这篇关于当输入验证失败Angularjs prevent表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！