单选按钮显示/隐藏输入都是必需的

Question

我有一个表单，我正在使用一个带有javascript的无线电来决定两个字段中的哪一个将显示给用户。这两个字段都是必填字段，因此表单无法提交，因为其中一个被隐藏且未完成。

如何编辑用于显示/隐藏字段的代码，以同时删除“必填”字段？

    <div class="custom-input-radio">
     <label><input type="radio" name="inputRadio" value="logo-upload" checked>A</label> 
     <label><input type="radio" name="inputRadio" value="text-upload">B</label> 
    </div>
 
        <div class="logo-upload selectt"> 
          <p class="line-item-property__field">
              <label for="upload-your-logo-or-branding">Upload Image</label>
              <input required class="required" id="upload-image" type="file" accept=".png, .jpg, .jpeg, .pdf, .ai, .psd, .svg" name="properties[Custom File Uploaded]">
          </p>
        </div> 
        <div style="display:none;" class="text-upload selectt"> 
            <p class="line-item-property__field">
                <label for="upload-your-logo-or-branding">Enter Text</label>
              <input required class="required" id="upload-your-logo-or-branding" type="text" minlength="1" maxlength="100" name="properties[Your Custom Text]">
            </p>
        </div> 

                $('input[type="radio"]').click(function() { 
                    var inputValue = $(this).attr("value"); 
                    var targetBox = $("." + inputValue); 
                    $(".selectt").not(targetBox).hide();
                    $(targetBox).show(); 
                }); 
            }); 

Answer 1

如果输入字段可见，您可以设置它的required属性：

$('input[type="radio"]').click(function() { 
  var inputValue = $(this).attr("value"); 
  var targetBox = $("." + inputValue); 
  $(".selectt").not(targetBox).hide();
  $(targetBox).children().children("input").prop("required", true);
  $(".selectt").not(targetBox).children().children("input").prop("required", false);
  $(targetBox).show(); 
});

您还可以在提交时执行验证，并完全删除required属性：

myform.addEventListener('submit', function (e) {
  e.preventDefault();
  // check if you have what you need, then send the form
}

Answer 2

我将这样做：

​

const formChooser = document.forms['form-chooser']
  ,   divsUpLd    = document.querySelectorAll('div.selectt')
  ;
formChooser.onchange = () => 
  {
  divsUpLd.forEach( divN =>
    {
    if (divN.classList.contains( formChooser.inputRadio.value ))
      {
      divN.classList.remove('noDisplay')
      divN.querySelectorAll('input.required')
          .forEach(inR => inR.setAttribute('required','required'))
      }
    else
      {
      divN.classList.add('noDisplay')
      divN.querySelectorAll('input.required')
          .forEach(inR => inR.removeAttribute('required'))
      }
    })
  }

.noDisplay { display: none; }

<div class="custom-input-radio">
  <form name="form-chooser">
    <label><input type="radio" name="inputRadio" value="logo-upload" checked>A</label>
    <label><input type="radio" name="inputRadio" value="text-upload">B</label>      
  </form>
</div>

<div class="logo-upload selectt">
  <p class="line-item-property__field">
    <label for="upload-your-logo-or-branding">Upload Image</label>
    <input id="upload-image"
           type="file" 
           accept=".png, .jpg, .jpeg, .pdf, .ai, .psd, .svg"
           name="properties[Custom File Uploaded]"
           class="required"
           required="required" >
  </p>
</div>

<div class="text-upload selectt noDisplay">
  <p class="line-item-property__field">
    <label for="upload-your-logo-or-branding">Enter Text</label>
    <input id="upload-your-logo-or-branding"
           type="text" 
           minlength="1" maxlength="100"
           name="properties[Your Custom Text]"
           class="required" >
  </p>
</div>

​