Angular form validation is not working

Question

I have the following form :

UPDATE

<script type="text/ng-template" id="form-profile.html">
            <form id="f1" name="form">
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" class="form-control" name="name" ng-model="formData.name"  ng-class="submitted ? 'ng-dirty' : ' ' " required autofocus> 
                <span style="color:red" ng-show="form.name.$dirty || form.name.$invalid">Name is required</span>
                </div>
                <div class="form-group">
                    <label for="name">E-mail</label>
                    <input type="text" class="form-control" name="email" ng-model="formData.email" ng-class="submitted ? 'ng-dirty' : ' '" required autofocus>
                    <span style="color:red" ng-show="f1.email.$dirty && f1.email.$invalid">
                        <span ng-show="f1.email.$error.required">Email is required.</span>
                    </span>
                </div>
                <div class="form-group">
                    <label for="Cellphone">Mobil nr.</label>
                    <input type="text" class="form-control" name="Cellphone" ng-model="formData.Cellphone" ng-class="submitted ? 'ng-dirty' : ' '" required autofocus>
                    <span style="color:red" ng-show="f1.Cellphone.$dirty && f1.Cellphone.$invalid">
                        <span ng-show="f1.Cellphone.$error.required">Cellphone is required.</span>
                    </span>
                </div>

                <div class="form-group">
                    <label for="address">Adresse</label>
                    <input type="text" class="form-control" name="address" ng-model="formData.address">
                </div>
                <div class="form-group col col-33 col-offset-67">
                    <a ui-sref="front.form.organisation" class="button icon-right ion-chevron-right  button-energized .col-offset-50">
                        Next
                    </a>
                </div>
            </form>
        </script>

When I press next I want the form to disable the next button and show me the errors.

I have tried with name so far and I did not get the errors.

Thank you

You want to submit form by keyboard enter, right? because I dont see submit button in your form — murnax
– murnax, Commented Mar 17, 2015 at 11:52

sylwester · Accepted Answer · 2015-03-17 11:54:34Z

1

Please see demo below

ng-show="f1.name.$dirty <-- f1 that's form name not id

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {




});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">

    <form name="f1">
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" name="name" ng-model="formData.name" required autofocus>

        <span style="color:red" ng-show="f1.name.$dirty  && f1.name.$invalid">Name is required</span>

      </div>
    </form>
  </div>

answered Mar 17, 2015 at 11:54

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

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

13 Comments

Besa Over a year ago

Can you check my update. But this code <span style="color:red" ng-show="f1.name.$dirty && f1.name.$invalid">Name is required</span> does not get executed

sylwester Over a year ago

@besa use form name not id in your ng-show directive

Besa Over a year ago

I do that and still the same

sylwester Over a year ago

@Besa it will be shown when user type in somthing and delete after do you want to message shown on page load ?

Besa Over a year ago

Can you check my update and let me know if I can make the validation when I press Next . Thank you so much

|

Collectives™ on Stack Overflow

Angular form validation is not working

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related