Defining the `required` field in Bootstrap

Question

How to define a text box as needed (with a red border) in Twitter Bootstrap 3?

required="required" does not 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> 

Answer 1

Try using required="true" in bootstrap 3

Answer 2

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

For example, has-error displays a red border around the input. However, this will not affect the actual field validation. You will need to add additional client (javascript) or server logic to make the desired field.

Demo: http://bootply.com/90564

Answer 3

Check your own HTML5 form validation:

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

Answer 4

Form validation can be enabled in markup via 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 the check using JavaScript:

 $('#myForm').validator() 

and you need to use the required flag in the input field

Click here for more details.

Answer 5

If you are not working, if you have something like: novalidate = "novalidate" attached to your form.

Answer 6

To make the required field use required or required="true"

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