Login/Register
Angular form is $valid when all inputs are blank, why?
Asked Answered
Solved angularjsformsvalidationrequiredangularjs-forms
G

1

8

My form is showing up as valid even though all of my input fields are blank. I have the required keyword in the input fields.

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="/components/angular/angular.min.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>
  </head>

  <body>
    <main>
      <div class="container">
        <div class="row">
          <section ng-controller="LogInController as loginCtrl">
            <form name="signUpForm" action="/createuser" method="POST" novalidate>
              <fieldset>
              <div class="field input-field">
                Email <br />
                <input type="email" name="email" required />
              </div>

              <div class="field input-field">
                Password <br />
                <input type="password" name="password" required />
              </div>

              <div class="field input-field">
                Confirm Password <br />
                <input type="password" name="confirmation" required />
              </div>

              !! -- Form valid? {{signUpForm.$valid}} -- !!

              <div class="actions">
                <input type="submit" value="Sign Up" />
              </div>
              </fieldset>
            </form>
          </section>
        </div>
      </div>
    </main>
  </body>
</html>

Loading this in the browser results in !! -- Form valid? true -- !! I thought angular knows that the required tag makes a blank field invalid?

Glair answered 9/4, 2015 at 16:32 Comment(3)
you have novalidate on form. – Ardatharde
@maddog novalidate is needed so the browser doesn't perform it's validation. – Labradorite
@maddog Its just to avoid browser own validation popups like chrome does on required field – Fernandofernas
F
10

You should place ng-model on each field to enable form on each field, Unless you add ng-model & name with value your field will never considered as part of your form. And do change one thing create one parent variable such as form & add all the scope variables in it. like in controller do $scope.form = {}; & then on UI add all ng-model s to it like form.email, form.password & form.confirmation.

For more better form validation remove action & method attribute from a form & use ng-submit directive which will call one of controller method. & Do call post from that controller method by checking form is $valid or not.

Markup

<form name="signUpForm" ng-submit="submit(signUpForm, form)" novalidate>
    <fieldset>
        <div class="field input-field">
            Email
            <br />
            <input type="email" name="email" ng-model="form.email" required />
        </div>

        <div class="field input-field">
            Password
            <br />
            <input type="password" ng-model="form.password" name="password" required />
        </div>

        <div class="field input-field">
            Confirm Password
            <br />
            <input type="password" ng-model="form.confirmation" name="confirmation" required />
        </div>

        !! -- Form valid? {{signUpForm.$valid}} -- !!

        <div class="actions">
            <input type="submit" value="Sign Up" />
        </div>
    </fieldset>
</form>

Controller

$scope.submit = function(form, formData) {
    if (form.$valid) { //submit form if it is valid
        $http.post('/url', {
          data: formData
        })
        .success(function() {
          //code here
        })
        .error(function() {
        })
    } else {
        alert("Please fill all required fields")
    }     
}

Hope this has cleared your little concept about form, Thanks.

Fernandofernas answered 9/4, 2015 at 16:35 Comment(1)
As you correctly state, each <input/> should get an ng-model attribute in order for the validation to work (the validators are added to the models). Yet you removed those attributes in your second edit of the answer …? – Amid

© 2022 - 2024 — McMap. All rights reserved.