CODEWITHSUNDEEP
jqueryformstwitter-bootstrap
TheAllSeeingI
TheAllSeeingI

Reputation: 171

Bootstrap 3 - Form - Required Field - Drop Down

My first post on stackoverflow, so be gentle. Im a novice learner :) Im building a form using Twitter Bootstrap 3. In that form, I have a dropdown to allow users to select the country. My question is : How do I make that a "required" field? I dont want the form to be submitted if that field is skipped. Im using the "required" field like so and it works for basic text type.

<input type="text" class="form-control" placeholder="Enter Name..." required />

But Im not sure where do I insert the "required" when using a dropdown. Im trying to do this with any additional jquery/js. Already included jquery-1.10.2.js and bootstrap.js

bootply.com snippet

Please help.

Upvotes: 3

Views: 4225

Answers (2)

Shrikant
Shrikant

Reputation: 538

===.js===
$scope.addNewGuide = function(isValid) {

    if (_.isEmpty($scope.selectedCategory)) {
        isValid = false;
        $scope.notSelectedCategory = true;
    }
}
=====.html====
<form name="guide" ng-submit="addNewGuide(GuideListing.$valid)" novalidate>
  <div class="col-md-4">
    <div class="scrolldiv">
      <ul class="none ulstyle">
        <li  ng-repeat="categories in getCategoryAPIData" ng-if='categories.category.name.length>0'>
          <label>
            <input type="checkbox" id="chkCategory" name="chkCategory" ng-model="categories.category.chkCategory" ng-change="selectCategory(categories,categories.category.chkCategory)">{{categories.category.name}}
          </label>
        </li>
      </ul>
    </div>
    <span class="help-block redtext" ng-show="`notSelectedCategory`">Please select Category</span>
  </div>
</div>

<input type="submit">
</form>

Upvotes: 0

Joshua Moore
Joshua Moore

Reputation: 24776

The required attribute can be added to the select element. From your example:

 <div class="form-group">
          <label for="country" class="col-sm-3 control-label">Country *</label>
          <div class="col-sm-6">
          <select id="country" name="country" class="form-control" required>

I also added the id and name attributes to your select element for completeness.

Upvotes: 5

Related Questions