66

Twitter Bootstrap 3 でテキスト フィールドを必須として (赤い枠で) 定義するにはどうすればよいですか?

required="required"動作しません...

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
4

7 に答える 7

86

required="true"ブートストラップ 3 で使用してみる

于 2014-12-10T16:26:29.493 に答える
68

2018年アップデート

元の回答以来、HTML5 検証はすべての最新ブラウザーでサポートされるようになりました。フィールドを必須にする最も簡単な方法は、required 属性を使用することです。

<input type="email" class="form-control" id="exampleInputEmail1" required>

または準拠した HTML5:

<input type="email" class="form-control" id="exampleInputEmail1" required="true">

Bootstrap 4 検証の詳細を読む

Bootstrap 3 では、「検証状態」クラスを親要素に適用できます: http://getbootstrap.com/css/#forms-control-validation

たとえばhas-error、入力の周りに赤い境界線が表示されます。ただし、これはフィールドの実際の検証には影響しません。フィールドを必須にするには、クライアント (javascript) またはサーバー ロジックを追加する必要があります。

デモ: http://bootply.com/90564

于 2013-10-28T17:02:22.047 に答える
5

フォームの検証は、data-api または JavaScript を介してマークアップで有効にすることができます。data-toggle="validator"フォーム要素に追加して、フォームの検証を自動的に有効にします。

<form role="form" data-toggle="validator">
   ...
</form>

または、JavaScript を介して検証を有効にします。

$('#myForm').validator()

入力フィールドで必須フラグを使用する必要があります

詳細はこちら

于 2015-05-28T23:34:06.703 に答える
0

フィールドを必須にするには、requiredまたはを使用しますrequired="true"

required="required"ブートストラップのバージョン 3 で非推奨になったと思います。

于 2015-06-23T07:01:27.033 に答える