简体   繁体   中英

radio button show/hide inputs both required

i have a form which i am using a radio with javascript to decide which of the two fields are to be shown to the user. They are both required fields, so the form can't submit because one is hidden and not completed.

How can i edit the code being used to show/hide fields to also remove the "required" fields?

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

You could set the required property of the input field if it's visible:

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

You could also do the validation on submit, and remove the required property altogether:

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

I will do it this way:

 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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM