Question

我试图验证以下表格：

<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控制器。但这并不重要，因为如果表单有错误，我的意图绝不是调用rails的控制器操作。

提前致谢。

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

Answer 2

尝试替换

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

到

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

Answer 3

你可以试试这个。

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

Answer 4

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

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

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

<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变量'submitted'设置为true，以便如果表单已在无效状态中提交至少一次，即使其中没有任何字段被“触摸”，也会将一个类附加到表单中 - 所以它仍然是原始的。

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

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

4 个答案: