Angular: unable to avoid form submit on validation failure

Question

Im trying to validate the following form:

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

With the following method on 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 }
};

The form submition enters the method, and for a second you can see the the error messages are displayed. But the form is still submited.

I should add that the form is linked to a rails controller. But that shouldn't matter because my intention is never to call rail's controller action if the form has errors.

Thanks in advance.

Answer 1

All you need is to write 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

Try to replace

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

to

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

Answer 3

您可以尝试一下。

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

Answer 4

This is is. Apparently you can't prevent default submit if the form has an action attribute:

Angular prevents the default action (form submission to the server) unless the element has an action attribute specified.

So, you have to trick it by adding some code in the form:

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

Basically we used $event.preventDefault() to stop the submit propagation only if the form is invalid; plus we set a $scope variable 'submitted' to true in order to have a class that gets appended to the form if the form has been submitted in an invalid state at least once, even if none of its fields have been 'touched' – so it's still ng-pristine.

Solution found here: http://sandropaganotti.com/2014/03/01/angular-js-prevent-an-invalid-form-submission/