Form validation in AngularJS not working as expected

Question

I have an angular form. I am trying to implement some validation on required fields, like in this nice tutorial, which says that angular has this functionality "built in". However- it isn't working for me. When I submit the form without having filled out the fields, nothing happens. Can anyone see why?

    <form id = "myForm" name="myForm" novalidate>

                        <div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && !myForm.name.$pristine && submitted }">
                        <input type="text" name="name" class="form-control" ng-model="company.name" required>
                        <p ng-show="myForm.name.$invalid && !myForm.name.$pristine" >Your firm's name is required.</p>
                        </div>
                        <br />
                        <br />
                        <div class="form-group" ng-class="{ 'has-error' : myForm.address.$invalid && !myForm.address.$pristine && submitted }">
                        <input type="text" class="form-control" id = "address" name="address"  ng-model="company.address" required>
                         <p ng-show="myForm.address.$invalid && !myForm.address.$pristine" class="help-block">Your address is required.</p>
                        </div>

<button type="submit" ng-click= "createAccount()" class="btn btn-small btn-primary">GO

    </button>

        </form>

I have also included $scope.submitted = true; in my createAccount() function.

@Chandermani this is similar to what I have attempted above- I have set the submitted property to true in the function in the controller. — bookthief
– bookthief, Commented Feb 25, 2014 at 15:53

Lars Behnke · Accepted Answer · 2014-02-25 16:13:20Z

2

Remember that AngularJS is a client side framework. Your validation must be performed before you submit something.

Add ng-disabled to your submit button:

<button type="submit" ng-disabled="myForm.$invalid" ng-click= "createAccount()" class="btn btn-small btn-primary">GO</button>

Or check the validation status in the createAccount() function like in the tutorial example you are referring to:

if (!$scope.myForm.$valid) {
   alert('Something is wrong');
}

edited Feb 25, 2014 at 16:13

answered Feb 25, 2014 at 15:36

Lars Behnke

1,8912 gold badges14 silver badges14 bronze badges

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

2 Comments

bookthief Over a year ago

Thanks, that's one way of handling the validation- but in the tutorial, it shows it is possible to submit the form first and then have all the required fields highlighted with the error messages.

Lars Behnke Over a year ago

Ok, I think I grasped what you want. Besides the link @Chandermani posted, check also out stackoverflow.com/questions/17452247/…

Collectives™ on Stack Overflow

Form validation in AngularJS not working as expected

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related