单选按钮显示/隐藏输入都需要

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

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

$('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(); 
});

您还可以在提交时进行验证，并完全删除所需的属性：

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>