选择和单选按钮必需属性答案

【问题标题】：Select and radio button required attribute选择和单选按钮必需属性
【发布时间】：2016-08-29 08:34:41
【问题描述】：

请帮帮我:(我知道选择属性应该是

<select required></select>

但是我有一个 css 我该怎么放呢？

<div class="col-md-6">
                            <div class="form-group">
                              <label for="sel1">Which division of our company are you interested in *</label>
                              <select class="form-control" id="sel1">
                                <option>Please select one</option>
                                <option>Video game consoles and accessories</option>
                                <option>Gaming and entertainment gift cards/codes</option>
                                <option>Both</option>
                              </select>
                            </div>
                          </div>

另外，我怎样才能使单选按钮也需要？对于其他 - 请指定选项。

<div class="col-md-6">

                                <label for="form_business">Type of business *</label>
                                <div>                                    
                                    <label class="radio-inline" style="padding-left:30px;">
                                    <input type="radio" name="optradio">Retailer
                                    </label>

                                    <label class="radio-inline">
                                    <input type="radio" name="optradio">Other - Please specify
                                    </label>
                                     <input id="form_other" type="text" name="other" class="form-control" placeholder="Please specify">
                                   </div>
                              </div>

【问题讨论】：

使用jquery-validation..

标签： forms twitter-bootstrap select radio-button contact

【解决方案1】：

单选按钮：见here。您只需为 radiogroup 的一个输入设置required 属性，但您可以为所有输入设置它。

<div>
  <label class="radio-inline" style="padding-left:30px;">
    <input type="radio" name="optradio" required>Retailer
  </label>

  <label class="radio-inline">
    <input type="radio" name="optradio">Other - Please specify
  </label>
  <input id="form_other" type="text" name="other" class="form-control" placeholder="Please specify">
</div>

对于选择：强制将第一个值留空 - 要求对空值起作用。 see more

<select class="form-control" id="sel1" required>
  <option value="">Please select one</option>
  <option>Video game consoles and accessories</option>
  <option>Gaming and entertainment gift cards/codes</option>
  <option>Both</option>
</select>

小提琴here

【讨论】：

谢谢！我实际上想通了，但是选择表格呢？我尝试在课后输入 required 但它没有用

【解决方案2】：

我知道这是一个老问题。但万一人们仍然对这个问题有疑问。好吧，对于单选按钮，您只需添加一个必需属性到这样的输入之一......

<div>                                    
 <label class="radio-inline" style="padding-left:30px;">
   <input type="radio" name="optradio" required>Retailer
 </label>
 <label class="radio-inline">
 <input type="radio" name="optradio">Other-Please specify
 </label>
</div>

只要其中一个输入有一个必需的按钮，它就可以正常工作。

至于选择按钮的另一个问题。不幸的是，目前还没有选择按钮组的必需属性。但是可以通过将您的选择按钮包装在一个div中并使用js来检查您的按钮是否被选中来解决它。使用这样的代码更好地解释......

HTML

<div class="form-group">
 <label for="sel1">Which division of our company are you interested in *</label>
 <select class="form-control" id="sel1">
  <option>Video game consoles and accessories</option>
  <option>Gaming and entertainment gift cards/codes</option>
  <option>Both</option>
 </select>
</div>

Javascript

var checkBoxes=document.querySelectorAll('#sel1 input');
var length = 0;
[...checkBoxes].forEach(checkBox=>{
   if(checkBox.checked) length++
})
if(length>0){
 /*
if at least one is checked, you can add whatever code 
 you went here
 */
 [...checkBoxes].forEach(checkBox=>{
    checkBox.setCustomValidity('')
 })
}else{
 /*
 if none is checked, you can add whatever code 
 you went here
*/
 [...checkBoxes].forEach(checkBox=>{
    checkBox.setCustomValidity('error')
 })
}

注意：HTMLSelectElement.setCustomValidity() 方法将选择元素的自定义有效性消息设置为指定消息。使用空字符串表示该元素没有自定义有效性错误。

希望这能回答你的问题

【讨论】：