angularjs - Angularjs prevent form submission when input validation fails

Question

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>

And the controller:

var controller = function($scope) {

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

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

};

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?

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

score 331 · Accepted Answer

你可以做：

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

无需控制器检查。

score 67 · Accepted Answer

67

将提交按钮更改为：

<button type="submit" ng-disabled="loginform.$invalid">Login</button>

于 2014-06-17T17:25:12.943 回答

score 43 · Accepted Answer

所以 TheHippo 的建议答案对我不起作用，相反，我最终将表单作为参数发送给函数，如下所示：

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

这使得表单在控制器方法中可用：

$scope.login = {
    submit : function(form) {
        if(form.$valid)....
    }

score 13 · Accepted Answer

您的表单会自动作为对象放入 $scope。它可以通过访问$scope[formName]

下面是一个示例，它将与您的原始设置一起使用，并且无需将表单本身作为参数传递给 ng-submit。

var controller = function($scope) {

    $scope.login = {
        submit: function() {
            if($scope.loginform.$invalid) return false;

        }
    }

};

工作示例：http ://plnkr.co/edit/BEWnrP?p=preview

score 13 · Accepted Answer

HTML：

<div class="control-group">
    <input class="btn" type="submit" value="Log in" ng-click="login.onSubmit($event)">
</div>

在您的控制器中：

$scope.login = {
    onSubmit: function(event) {
        if (dataIsntValid) {
            displayErrors();
            event.preventDefault();
        }
        else {
            submitData();
        }
    }
}

score 3 · Accepted Answer

虽然不是 OPs 问题的直接解决方案，但如果您的表单在ng-app上下文中，但您希望 Angular 完全忽略它，您可以使用ngNonBindable指令显式执行此操作：

<form ng-non-bindable>
  ...
</form>

score 2 · Accepted Answer

只是为了补充上面的答案，

我有一个 2 个常规按钮，如下所示。（无类型=“提交”任何地方）

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>
<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

无论我尝试了多少，一旦表单有效，按下回车，“清除表单”按钮就会被调用，清除整个表单。

作为一种解决方法，

我必须添加一个禁用和隐藏的虚拟提交按钮。并且这个虚拟按钮必须位于所有其他按钮的顶部，如下所示。

<button type="submit" ng-hide="true" ng-disabled="true">Dummy</button>

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>

<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

好吧，我的意图是永远不会在 Enter 上提交，所以上面给出的 hack 工作正常。

score 1 · Accepted Answer

我知道这是一个旧线程，但我想我也会做出贡献。我的解决方案类似于已标记为答案的帖子。一些内联 JavaScript 检查可以解决问题。

ng-click="form.$invalid ? alert('Please correct the form') : saveTask(task)"

score 1 · Accepted Answer

我知道已经很晚了，但我想分享我做的整洁的东西。我创建了一个 ng-validate 指令来挂钩表单的 onsubmit，然后如果 $eval 为 false，它会发出 prevent-default：

app.directive('ngValidate', function() {
  return function(scope, element, attrs) {
    if (!element.is('form'))
        throw new Error("ng-validate must be set on a form elment!");

    element.bind("submit", function(event) {
        if (!scope.$eval(attrs.ngValidate, {'$event': event}))
            event.preventDefault();
        if (!scope.$$phase)
            scope.$digest();            
    });
  };
});

在您的 html 中：

<form name="offering" method="post" action="offer" ng-validate="<boolean expression">

angularjs - Angularjs prevent form submission when input validation fails

9 回答 9

Related

Reference