twitter-bootstrap Select2 和 HTML5 表单验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18955835/
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
Select2 and HTML5 form validation
提问by Nizar
How I can do a form validation (HTML5 Required) with Select2?
如何使用 Select2 进行表单验证（需要 HTML5）？
回答by zizoujab
This may be a late answer but anyway : you just add a required to the select and the html5 validation will show up :
这可能是一个迟到的答案，但无论如何：您只需在选择中添加一个 required ，就会显示 html5 验证：
Fiddle : http://jsfiddle.net/mksshhwt/
小提琴：http: //jsfiddle.net/mksshhwt/
<form>
required select2: <select class="select2" required multiple name="test">
<option>Test</option>
<option>Test2</option>
</select>
<br/>
required select2: <select class="select2" required name="test">
<option>Test</option>
<option>Test2</option>
</select>
<br/>
<input type="submit" value="Test" />
</form>
JS :
JS：
$(".select2").select2();
you may get the validation a little on the top , follow this thread to fix it : https://github.com/select2/select2/issues/128
您可能会在顶部获得一些验证，请按照此线程进行修复：https: //github.com/select2/select2/issues/128
回答by Agu Dondo
What I did was:
我所做的是：
<select name="myselect" class="select2" required>
And added some CSS to make it very small but "visible" so the HTML validation alert can appear
并添加了一些 CSS 以使其非常小但“可见”，以便可以显示 HTML 验证警报
select.select2{
position: static !important;
outline:none !important;
}
And initialize Select2 as you normally would:
并像往常一样初始化 Select2：
$(".select2").select2();
回答by Owais Bin Rizwan
Just use only css
只使用css
.select2-hidden-accessible select{
display: block;
margin: 0px auto;
opacity: 0;
}
回答by Zach Painter
Yes validation will work as expected with the select2 element... This is because underneath the form is still using your original input...
是的，使用 select2 元素验证将按预期工作......这是因为表单下方仍在使用您的原始输入......
If you want to style the Select 2 multi select display using html 5 pseudo elements :validand :invalid
如果您想使用 html 5 伪元素:valid和:invalid
you will need to do something like this..
你需要做这样的事情..
select:invalid + .select2-container > span.selection > span.select2-selection {
border-color: #dc3545;
}
select:invalid + .select2-container--focus > span.selection > span.select2-selection {
border-color: #dc3545;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
select:valid + .select2-container > span.selection > span.select2-selection {
border-color: #28a745;
}
select:valid + .select2-container--focus > span.selection > span.select2-selection {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
This gives a bootstrap styling for valid and invalid elements.
这为有效和无效元素提供了引导样式。
I use bootstrap in my projects so I went a bit further with the styling rules:
我在我的项目中使用 bootstrap，所以我在样式规则上走得更远：
.was-validated select.form-control:invalid + .select2-container > span.selection > span.select2-selection {
border-color: #dc3545;
}
.was-validated select.form-control:invalid + .select2-container--focus > span.selection > span.select2-selection {
border-color: #dc3545;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.was-validated select.form-control:valid + .select2-container > span.selection > span.select2-selection {
border-color: #28a745;
}
.was-validated select.form-control:valid + .select2-container--focus > span.selection > span.select2-selection {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
