Form Validation angular/bootstrap

Question

Not able to understand that why the required validation is not working ??

HTML

<div ng-app="app">
    <div ng-controller="myctrl">
        <form name="myform" class="form form-horizontal" novalidate>
            <fieldset class="fieldset" ng-show="payment == 'bankAccount'" class="form-group clearfix">
                <ul class="form-group">
                    <li ng-class="{
                'has-error':  myform.routingNumber.$invalid,
                'has-success':myform.routingNumber.$valid}">
                        <label for="routingNumber">Bank Routing Number</label>
                        <div class="" ng-show="myform.routingNumber.$error.required"> <span class="help-block">Please enter routing number</span>

                        </div>
                        <input type="text" name="routingNumber" class="form-control" required/>
                    </li>
                </ul>
            </fieldset>
        </form>
    </div>
</div>

JS

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

PSL · Accepted Answer · 2014-09-27 01:42:35Z

3

You need to provide an ng-model for the angular validation on the form to kick in.

Try:-

<input type="text" ng-model="routingNumber" name="routingNumber" class="form-control" required/>

On a side note:- there is no use of using label for without using id on the target input.

Demo

edited Sep 27, 2014 at 1:42

answered Sep 27, 2014 at 1:31

PSL

124k21 gold badges257 silver badges243 bronze badges

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

4 Comments

m59 Over a year ago

@future you don't have "myctrl" controller declared in your javascript. See the console log.

PSL Over a year ago

@future I added a demo as well. :), hope that helps. sorry i hate fiddle, plnkr is much better

future Over a year ago

thanks very much . Actually in my previous work validation was working for name attribute (jsfiddle.net/FeS4A/55) So i was trying same over here

PSL Over a year ago

@future oh yeah i see, infact you had ng-model there as well, how did you miss it...

Collectives™ on Stack Overflow

Form Validation angular/bootstrap

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related