Form validation with Bootstrap and AngularJS on Select boxes not working

Question

I'm trying to setup bootstrap validation on dropdown boxes, just so they're required to have a selected value and if not they're given a red border to show they're a required field..

I've followed some tutorials but can't seem to get any red border to appear when the dropdown boxes don't have a selected value.

Can anyone see what's missing?

<div ng-app="filterP" ng-controller="filter">
    <form name="myForm" data-toggle="validator" role="form">
        <div class="row">
            <div class="form-group col-md-3">
                <label class="control-label">* Type:</label>
                <select id="type" class="form-control" ng-options="x for x in types" name="selectedType" ng-model="selectedType" ng-change="getSizes()" required></select>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-4">
                <label class="control-label">* Model:</label>
                <select id="size" class="form-control" name="size" ng-model="selectedSize" ng-options="item as item.SizeDesc for item in sizes" required></select>
            </div>
            <div class="row">
                <div class="form-group col-md-12">
                    <div class="col-md-4">
                        <button type="submit" ng-click="generateReport()" class="btn btn-success btn-md ">Generate</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

(the second dropdown is populated after you've selected the first with getSizes) — kageoni
– kageoni, Commented May 25, 2017 at 12:59

Mohit Saxena · Accepted Answer · 2017-05-25 15:22:10Z

1

Create a css Class like this:

 <style>
    .checkValid .ng-invalid {
        border: 1px solid red;
    }
</style>

Now write your form tag like below :

<form id="myForm" name="myForm" data-toggle="validator" role="form" ng-
class="{'checkValid': checkValid}">

And add this code in your controller :

  $scope.generateReport = function () {
            var form = document.querySelector('#myForm');
            if (!form.checkValidity()) {
                $scope.checkValid = true;
            }
        }

answered May 25, 2017 at 15:22

Mohit Saxena

1,4471 gold badge12 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Form validation with Bootstrap and AngularJS on Select boxes not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related