Question

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

<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>

Answer 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

Answer 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 检查您的按钮是否被选中来使用 javascript 解决。使用这样的代码更好地解释...

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() 方法将选择元素的自定义有效性消息设置为指定的消息。使用空字符串表示该元素没有自定义有效性错误。

希望这能回答您的问题

选择和单选按钮必需属性

2 个答案: