Angular：验证失败时无法避免表单提交答案

【问题标题】：Angular: unable to avoid form submit on validation failureAngular：验证失败时无法避免表单提交
【发布时间】：2015-11-06 09:20:18
【问题描述】：

我正在尝试验证以下表单：

<div ng-controller="LoginController">
  <form name="form" class="ng-pristine ng-valid" accept-charset="UTF-8" action="/sessions/login?locale=" method="post" novalidate>
    {{ errorUsername }}
    <input id="username" name="username" type="text" placeholder="EMAIL ADDRESS" ng-model="username" required> 
    {{ errorPassword }}
    <input id="password" name="password" type="password" placeholder="PASSWORD" ng-model="password" required>
    <p><input name="commit" value="LOGIN" ng-click="submitForm()" type="submit"></p>
  </form>
</div>

在 LoginController 上使用以下方法：

$scope.submitForm = function() {
    var is_valid = true;
    if ( username.innerHTML == "" ) {
        $scope.errorUsername = "Email required";
        is_valid = false;
    };
    if ( password.innerHTML == "" ) {
        $scope.errorPassword = "Password required";
        is_valid = false;
    };
    if (! is_valid ) { $scope.form.submitted = true }
};

表单提交进入方法，一秒钟你可以看到错误信息被显示出来。但表格仍然提交。

我应该补充一点，该表单已链接到 Rails 控制器。但这无关紧要，因为我的意图是永远不会在表单出现错误时调用 rail 的控制器操作。

提前致谢。

【问题讨论】：

标签： javascript ruby-on-rails angularjs forms

【解决方案1】：

你只需要写return false;

$scope.submitForm = function() {
  var is_valid = true;
  if ( username.innerHTML == "" ) {
    $scope.errorUsername = "Email required";
    is_valid = false;
    return false;
  };
  if ( password.innerHTML == "" ) {
    $scope.errorPassword = "Password required";
    is_valid = false;
    return false;
  };
  if (! is_valid ) { $scope.form.submitted = true }
};

【讨论】：

感谢@Pardeep Saini，但它仍在提交表单

【解决方案2】：

尝试替换

<input name="commit" value="LOGIN" ng-click="submitForm()" type="submit">

到

<input name="commit" value="LOGIN" ng-click="submitForm()" type="button">

【讨论】：

但是如果用户按回车键按下这可能不起作用。
是的，正如@ParthaSarathiGhosh 所说，这种方式永远不会提交表单。

【解决方案3】：

你可以试试这个。

<form name="yourform" ng-submit="yourform.$valid && submitForm()"

【讨论】：

感谢@ParthaSarathiGhosh，但由于某种原因，表单仍被提交
您是否从按钮中删除了 ng-click？
尝试将我的变体用于按钮，并将其用于 from。
我都试过了，ParthaSarathiGhosh 和@kunashir。不幸的是，没有一个工作。

【解决方案4】：

这是。显然，如果表单具有 action 属性，您无法阻止默认提交：

除非元素指定了 action 属性，否则 Angular 会阻止默认操作（向服务器提交表单）。

所以，你必须通过在表单中添加一些代码来欺骗它：

<form name="login" class="ng-pristine ng-valid" accept-charset="UTF-8" action="/sessions/login?locale=" method="post" novalidate ng-submit="(submitted=true) && login.$invalid && $event.preventDefault()" ng-class="{true:'submitted'}[submitted]">

基本上我们使用 $event.preventDefault() 仅在表单无效时才停止提交传播；另外，我们将 $scope 变量“提交”设置为 true，以便在表单至少以无效状态提交一次时附加到表单的类，即使它的任何字段都没有被“触及”——所以它仍然是 ng-pristine。

在此处找到解决方案：http://sandropaganotti.com/2014/03/01/angular-js-prevent-an-invalid-form-submission/

【讨论】：