使用HTML5表单验证，仅当特定 <option>从一个<select>菜单被选中？

Question

Here's a simple form I have:

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

How do I make the "other_text" input field required if, and only if, the "choice" selection is set to value "Other" ? By default, the input field should not be required. Could this be done with only HTML5, or is Javascript required?

Answer 1

Since this use case is dependent upon user interaction and selection of an appropriate menu item, it requires Javascript, and can't be achieved independently with HTML5. You may use following snippet for the requested scenario

<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

I believe that you must use a scripting language like javascript for this. Give your select field an ID and call your javascript funciton

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

Then use javascript to manipulate the other field

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