Defining a `required` field in Bootstrap

Twitter BootstrapTwitter Bootstrap-3

Twitter Bootstrap Problem Overview


How do I define text field as required (with red border) in Twitter Bootstrap 3?

required="required" doesn't work...

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

Twitter Bootstrap Solutions


Solution 1 - Twitter Bootstrap

Try using required="true" in bootstrap 3

Solution 2 - Twitter Bootstrap

Update 2018

Since the original answer HTML5 validation is now supported in all modern browsers. Now the easiest way to make a field required is simply using the required attibute.

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

or in compliant HTML5:

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

Read more on Bootstrap 4 validation


In Bootstrap 3, you can apply a "validation state" class to the parent element: http://getbootstrap.com/css/#forms-control-validation

For example has-error will show a red border around the input. However, this will have no impact on the actual validation of the field. You'd need to add some additional client (javascript) or server logic to make the field required.

Demo: http://bootply.com/90564


Solution 3 - Twitter Bootstrap

Check out native HTML5 form validation:

http://www.the-art-of-web.com/html/html5-form-validation/

Solution 4 - Twitter Bootstrap

Form validation can be enabled in markup via the data-api or via JavaScript. Automatically enable form validation by adding data-toggle="validator" to your form element.

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

Or activate validation via JavaScript:

$('#myForm').validator()

and you need to use required flag in input field

For more details Click Here

Solution 5 - Twitter Bootstrap

If wont work in case you have something like : novalidate="novalidate" attached to your form.

Solution 6 - Twitter Bootstrap

To make a field required, use required or required="true"

I think required="required" has been deprecated in version 3 of bootstrap.

Solution 7 - Twitter Bootstrap

Use 'needs-validation' apart from form-group, it will work.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmotorcbView Question on Stackoverflow
Solution 1 - Twitter BootstrapvmaView Answer on Stackoverflow
Solution 2 - Twitter BootstrapZimView Answer on Stackoverflow
Solution 3 - Twitter BootstrapFosnezView Answer on Stackoverflow
Solution 4 - Twitter BootstrapVishal KhadkeView Answer on Stackoverflow
Solution 5 - Twitter BootstrapJignesh RawalView Answer on Stackoverflow
Solution 6 - Twitter BootstrapAli QorbaniView Answer on Stackoverflow
Solution 7 - Twitter BootstrapPradeep paiView Answer on Stackoverflow