当inputvalidation失败时，Angularjs阻止表单提交

我正在写一个简单的login表单使用angularjs与一些客户端inputvalidation，以检查用户名和密码是不是空的和长于三个字符。 看下面的代码：

<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); } } }; 

问题是，即使input无效， login.submit函数也会被调用。 有没有可能防止这种行为？

作为一个方面的说明，我可以提到，我也使用bootstrap和requirejs。

Answer 1

将提交button更改为：

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

Answer 2

你可以做：

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

不需要控制器检查。

Answer 3

所以从TheHippo的build议答案不适合我，而是我最终发送表单作为参数的函数如下所示：

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

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

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

Answer 4

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

下面是一个可以使用原始设置的例子，而不必在ng-submit中将表单本身作为parameter passing。

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

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

Answer 5

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(); } } } 

Answer 6

只是为了增加上面的答案，

我有一个2个常规button，如下所示。 （没有types=“提交”任何地方）

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

无论我尝试了多less次， 一旦表格有效 ， 按回车 ，“清除表格”button被调用，清除整个表格。

作为一种解决方法，

我不得不添加一个被禁用和隐藏的虚拟提交button。 而这个虚拟button必须在所有其他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> 

那么，我的意图是从来没有提交回车，所以上面给的破解工作正常。

Answer 7

虽然不是OPs问题的直接解决scheme，但如果您的表单处于ng-app上下文中，但您希望Angular完全忽略它，则可以使用ngNonBindable指令明确地执行此操作：

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

Answer 8

我知道这是一个古老的线索，但我想我也会做出贡献。 我的解决scheme与已经标记为答案的post类似。 一些内嵌的JavaScript检查可以做到这一点。

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

Answer 9

我知道已经很晚了，已经回答了，但我想分享一下我制作的整齐的东西。 我创build了一个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">