Javascript 角度：无法避免在验证失败时提交表单

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

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

表单提交进入该方法，您可以在一秒钟内看到显示的错误消息。但表格仍在提交中

我应该补充一点，表单链接到rails控制器。但这并不重要，因为我的意图是，如果表单有错误，就永远不会调用rail的控制器操作

---

提前感谢。

您只需编写

返回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 }
};

试着替换


到

你可以试试这个

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

这是。显然，如果表单具有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变量'submitted'设置为true，以便在表单至少以无效状态提交一次时，将类追加到表单中，即使表单的所有字段都未被“触碰”——因此它仍然是原始的

这里找到的解决方案：
谢谢@Pardeep Saini，但它仍在提交表单，但如果用户点击“回车”按钮，按此按钮可能不起作用。是的，正如@ParthaSarathiGhosh所说，这样表单就永远不会提交。谢谢@ParthaSarathiGhosh，但是由于某些原因，表单仍然提交。您是否从按钮中删除了ng click？请尝试使用我的变体作为按钮，这是从。我尝试了两者，ParthaSarathiGhosh和@kunashir。不幸的是，这一切都不起作用。
<form name="yourform" ng-submit="yourform.$valid && submitForm()"

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