jquery - 如何使用基于单选按钮输入的jquery跳过隐藏输入字段的验证(删除必需属性)

Question

a 有一个使用 bootrap 的简单表单。为了进行验证，我使用了“必需”的 Bootstrap ，效果很好。

但在我的表单中，我根据单选按钮隐藏带有查询的输入字段。

我的问题是提交表单需要隐藏的输入字段。我怎样才能跳过这个。我不想验证隐藏的输入。

错误:https://www.screencast.com/t/ObpmoXfGE9

Answer 1

当您根据单选按钮值隐藏表单输入时，请从这些输入中删除必需的属性。 这样隐藏的输入就不会得到验证。

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

希望这有帮助!

从你的 fiddle 中我了解到你需要从隐藏输入中删除必需的属性。假设如果电梯可见，那么您需要从类别和地面区域输入中删除所需的属性。

按照下面的方法就可以了--

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

注意:将所有内容包装在 $(document).ready 函数中。