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
Defining a `required` field in Bootstrap
提问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
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
回答by Fosnez
Check out native HTML5 form validation:
查看原生 HTML5 表单验证:
回答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"
要使字段为必填项,请使用required或required="true"
I think required="required"has been deprecated in version 3 of bootstrap.
我认为required="required"在 bootstrap 的第 3 版中已被弃用。

