Question

这是我的一个简单表格：当且仅当“选择”选项设置为值“其他”时，如何使“ other_text”输入字段为必需？默认情况下，不需要输入字段。可以仅使用HTML5完成此操作，还是需要Javascript？

Answer 1

由于该用例取决于用户的交互作用和对适当菜单项的选择，因此它需要Javascript，并且不能单独使用HTML5实现。您可以针对请求的场景使用以下代码段

<form name="form_1">
    <fieldset>
        <select required name="choice">
          <option value="1">Choice 1</option>
          <option value="2">Choice 2</option>
          <option value="Other">Other</option>
        </select>
        <label for="other_text">If other, please specify: </label>
        <input id="other_text" name="other_text" size="30">
      </fieldset>
</form>
<script type="text/javascript">
    var form = document.getElementsByTagName('form')[0];
    form.onsubmit = function(e) {
        if (document.getElementsByTagName('select')[0].value == "Other") {
            e.preventDefault();
            // Block submitting form if option =  Other selected 
            document.getElementById('other_text').setAttribute('required', true);
            return false;
        }
        // Allow form submit otherwise
        document.getElementById('other_text').removeAttribute('required');
        console.log("Submitting form", e);
        return true;
    }
</script>

Answer 2

我相信您必须为此使用JavaScript之类的脚本语言。给您的选择字段一个ID，然后调用您的JavaScript函数

<form name="form_1">
 <fieldset>
  <select required name="choice" id="choice" onchange="changeAttribute()">
   <option value="1">Choice 1</option>
   <option value="2">Choice 2</option>
   <option value="Other">Other</option>
  </select>
  <label for="other_text">If other, please specify: </label>
  <input id="other_text" name="other_text" size="30">
 </fieldset>
</form>

然后使用javascript操作其他字段

function changeAttribute(){
    if(document.getElementById('choice').value == "Other") {
        document.getElementById('other_text').setAttribute("required","");
    }else{
        document.getElementById('other_text').removeAttribute("required","");
    }
}

使用HTML5表单验证，仅当从<select>菜单中选择特定的<option>时，我才能使输入字段为必填项吗？

2 个答案: