twitter-bootstrap 在 Bootstrap 中定义“必填”字段

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19640616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 19:00:27  来源:igfitidea点击:

Defining a `required` field in Bootstrap

twitter-bootstraptwitter-bootstrap-3

提问by motorcb

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

如何在 Twitter Bootstrap 3 中根据需要定义文本字段(带有红色边框)?

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

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>

回答by vma

Try using required="true"in bootstrap 3

尝试required="true"在引导程序 3 中使用

回答by Zim

Update 2018

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.

由于现在所有现代浏览器都支持原始答案 HTML5 验证。现在,使字段成为必需的最简单方法就是使用所需的属性。

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

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

or in compliant HTML5:

或在兼容的 HTML5 中:

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

Read more on Bootstrap 4 validation

阅读有关 Bootstrap 4 验证的更多信息



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

在 Bootstrap 3 中,您可以将“验证状态”类应用于父元素:http: //getbootstrap.com/css/#forms-control-validation

For example has-errorwill 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.

例如has-error将在输入周围显示红色边框。但是,这不会对字段的实际验证产生影响。您需要添加一些额外的客户端 (javascript) 或服务器逻辑以使该字段成为必需。

Demo: http://bootply.com/90564

演示:http: //bootply.com/90564



回答by Fosnez

回答by Vishal Khadke

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.

可以通过 data-api 或 JavaScript 在标记中启用表单验证。通过添加data-toggle="validator"到您的表单元素自动启用表单验证。

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

Or activate validation via JavaScript:

或者通过 JavaScript 激活验证:

$('#myForm').validator()

and you need to use requiredflag in input field

并且您需要在输入字段中使用required标志

For more details Click Here

更多详情请点击这里

回答by Jignesh Rawal

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

如果您的表单附加了类似以下内容的内容,则无法使用:novalidate="novalidate"。

回答by Pradeep pai

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

除了表单组使用“需要验证”,它会起作用。

回答by Ali Qorbani

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

要使字段为必填项,请使用requiredrequired="true"

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

我认为required="required"在 bootstrap 的第 3 版中已被弃用。