How to skip validation(remove required attribute) for hidden input fields with jquery based on radio button input

Question

a have a simple form using bootrap. For the validaion I used the bootrap "required" which is working well.

But in my form Im hiding input fields with query depending on a radion button.

My problem is that hidden input fields are required for submitting the form. How can I skip this. I dont want to validate the hidden inputs.

Error: https://www.screencast.com/t/ObpmoXfGE9

Answer 1

When you are hiding form inputs based on radio button value, at that time remove the required attribute from those inputs. In this way the hidden inputs won't get validated.

$("#hidden_input_id").removeAttr("required");

Hope this helps!

From your fiddle I understood that you need to remove required attribute from hidden inputs. suppose if elevator is visible then you need to remove required attributes from category and ground-area inputs.

Just do it in the following way--

$(document).ready(function(){
$("input[name='type']").change(function() {
$("#elevator").toggle(this.value == "ETW");
$("#category :input").removeAttr("required");
$("#ground_area :input").removeAttr("required");
 });

$(document).ready(function() {
  $("input[name='type']").change(function() {
    $("#elevator").toggle(this.value == "ETW");
   $("#category :input").removeAttr("required");
  $("#ground_area :input").removeAttr("required");

  });

  $("input[name='type']").change(function() {
    $("#category").toggle(this.value == "EFH" || this.value == "ZFH");
  });

  $("input[name='type']").change(function() {
    $("#ground_area").toggle(this.value == "EFH" || this.value == "ZFH");
  });
});

<div class="form-group">
  <label>Objektadresse</label>
  <input type="text" placeholder="Straße" class="form-control" name="street" required>
</div>

<div class="form-group">
  <input type="text" placeholder="Hausnummer" class="form-control" name="house_number" required>
</div>

<div class="form-group">
  <input type="text" placeholder="PLZ" class="form-control" name="zip" required>
</div>

<div class="form-group">
  <input type="text" placeholder="Stadt" class="form-control" name="town" required>
</div>



<div class="form-group" id="type">
  <label>Was möchten Sie bewerten?</label>
  <div class="radio">
    <label>
      <input type="radio" id="type1" name="type" value="ETW" required>Eigentumswohnung</label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" id="type2" name="type" value="EFH" required>Einfamilienhaus</label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" id="type3" name="type" value="ZFH" required>Mehrfamilienhaus</label>
  </div>
</div>

<div id="category" class="form-group" style="display:none;">
  <label>Um welche Kategorie handelt es sich?</label>
  <div class="radio">
    <label>
      <input type="radio" name="category" value="FREISTEHEND" required>Freistehend</label>
  </div>

  <div class="radio">
    <label>
      <input type="radio" name="category" value="DOPPELHAUS" required>Doppelhaushälfte</label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="category" value="REIHENMITTELHAUS" required>Reihenmittelhaus</label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="category" value="REIHENENDHAUS" required>Reihenendhaus</label>
  </div>
</div>


<div class="form-group">
  <label>Wann wurde das Objekt gebaut?</label>
  <input type="text" placeholder="Baujahr" class="form-control" name="year" required>
</div>



<div class="form-group">
  <label>Wie groß ist die Wohnfläche</label>
  <input type="text" placeholder="Wohnfläche" class="form-control" name="living_area" required>
</div>

<div id="ground_area" class="form-group" style="display:none;">
  <label>Wie groß ist das Grundstück</label>
  <input type="text" placeholder="Grundstücksgröße" class="form-control" name="ground_area" required>
</div>

<div class="form-group" id="elevator" style="display:none;">
  <label>Besitz die Wohnung einen Aufzug?</label>
  <div class="radio">
    <label>
      <input id="elevator1" type="radio" name="elevator" value="true" required>Ja</label>
  </div>
  <div class="radio">
    <label>
      <input id="elevator2" type="radio" name="elevator" value="false" required>Nein</label>
  </div>
</div>


<div class="form-group">
  <label>Besitz das Objekt eine Garage?</label>
  <div class="radio">
    <label>
      <input type="radio" name="garages" value="true" required>Ja</label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="garages" value="false" required>Nein</label>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

UPDATED fiddle

note: wrap everything inside $(document).ready function.