CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
kageoni
kageoni

Reputation: 45

Form validation with Bootstrap and AngularJS on Select boxes not working

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>

Upvotes: 0

Views: 535

Answers (1)

Mohit Saxena
Mohit Saxena

Reputation: 1449

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;
            }
        }

Upvotes: 1

Related Questions