Bootstrap 3 - 表单 - 必填字段 - 下拉答案

【问题标题】：Bootstrap 3 - Form - Required Field - Drop DownBootstrap 3 - 表单 - 必填字段 - 下拉
【发布时间】：2014-02-16 13:40:06
【问题描述】：

我在 stackoverflow 上的第一篇文章，所以要温柔。我是新手学习者:) 我正在使用 Twitter Bootstrap 3 构建一个表单。在那种形式中，我有一个下拉菜单允许用户选择国家。我的问题是：如何将其设为“必填”字段？如果跳过该字段，我不希望提交表单。我像这样使用“必填”字段，它适用于基本文本类型。

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

但我不确定在使用下拉菜单时在哪里插入“必需”。我试图用任何额外的 jquery/js 来做到这一点。已经包含 jquery-1.10.2.js 和 bootstrap.js

bootply.com snippet

请帮忙。

【问题讨论】：

标签： jquery forms twitter-bootstrap

【解决方案1】：

需要的属性可以添加到选择元素。从你的例子：

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

为了完整起见，我还在您的 select 元素中添加了 id 和 name 属性。

【讨论】：

还需要注意的是，如果没有选择任何项目，第一个

【解决方案2】：

===.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>

【讨论】：