Angular.js - Form submits when i enter return false

Question

I am practicing my angular.js and form validation. I want to make it so that the form won't submit when I click submit if variables user_valid and pass_valid are false. I do thus perfectly fine when writing code outside of angularjs by calling return false;. But when work in angular.js, and insert ng-submit='loginVal()', and type in my controller:`

logApp.controller('logForm', function($scope, $http){
    user_valid = false;
    pass_valid = false;

    $scope.loginVal = function(){
        if (user_valid == false && pass_valid == false){
            return false;
            console.log('Submit Stopped');
        }
    }`

    ...

});

The form still submits, and it shows in console Navigated to ~form-action url~. I don't know why it is submitting. The rest of the functions in the controller have nothing related to this function, so i excluded it.

HTML:

<form name='login' method="post" action="" ng-submit='loginVal()'>
        {% csrf_token %}
            <!-- LOGIN FORM -->
            <table id='show-table'>
                <tr>
                    <td width='20%'>Username</td>
                    <td width="80%">
                        <div class='col-md-12' id='userField'>
                            <input name='name' type="text" ng-model='username' ng-change='checkName()'/>
                            <div id='success'></div>
                            <div id='failure'></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td>
                        <div class='col-md-12'>
                            <input name="pwd" type="password" ng-model='password' />
                        </div>
                    </td>
                </tr>
                    <td></td>
                    <td><input type="submit" value="Login" id='loginSubmit' disabled /></td>
                </tr>
            </table>

        </form>

Btw, any code after return is unreachable/dead code. The console.log there is of no use. — Marko Gresak
– Marko Gresak, Commented May 1, 2016 at 0:31
Alright, I will fix that. @SmileApplications I have posted the HTML. — TheGodProject
– TheGodProject, Commented May 1, 2016 at 0:38

Matteo Cardellini · Accepted Answer · 2016-05-01 01:15:48Z

1

Remove the action and the method attributes in the form tag

EDIT Look at this fiddle: https://jsfiddle.net/80Laf822/1/

<div ng-controller="FormController">
  <form name='loginForm' method="post" action="" ng-submit='loginVal()'>
    <!-- LOGIN FORM -->
    <table id='show-table'>
      <tr>
        <td width='20%'>Username</td>
        <td width="80%">
          <div class='col-md-12' id='userField'>
            <input name='name' type="text" ng-model='username' required/>
            <div id='success'></div>
            <div id='failure'></div>
          </div>
        </td>
      </tr>
      <tr>
        <td>Password</td>
        <td>
          <div class='col-md-12'>
            <input name="pwd" type="password" ng-model='password' required/>
          </div>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input type="submit" value="Login" id='loginSubmit' ng-disabled="loginForm.$invalid" />
        </td>
      </tr>
    </table>

  </form>
</div>

You can use the required attribute in the input and the property $invalid of the form to automatically disable or enable the button if the form is valid or not. You can do all type of things like patterns, max-length, min-lenght ...

edited May 1, 2016 at 1:15

answered May 1, 2016 at 0:41

Matteo Cardellini

8962 gold badges17 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheGodProject Over a year ago

I want to use it as a form, but I'm trying to make it so that if the username or password are invalid (indicated by user_valid=false and pass_valid=false), the form will not submit. If i remove the action and method, when the user_valid and pass_valid are true, the form will not submit.

Matteo Cardellini Over a year ago

Why don't you simple set ng-disabled="checkIfAuthIsValid()" so that the form cannot be sent if username or password aren't correct ?

TheGodProject Over a year ago

Wow, thanks. I'm still learning angular. Didn't even know that existed. Now i do. tyvm :) <3

Collectives™ on Stack Overflow

Angular.js - Form submits when i enter return false

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related