Question

a使用bootrap有一个简单的表单。对于验证我使用了“必需”的bootrap，它运行良好。

但是在我的表单中，我根据一个radion按钮隐藏了带有查询的输入字段。

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

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

Answer 1

当您根据单选按钮值隐藏表单输入时，此时从这些输入中删除所需的属性。通过这种方式，隐藏的输入不会得到验证。

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

希望这有帮助！

从你的小提琴我明白你需要从隐藏的输入中删除所需的属性。假设电梯是可见的，那么您需要从类别和地面区域输入中删除所需的属性。

只需按以下方式进行操作即可 -

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

＆＃13;

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

＆＃13;

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

＆＃13;

UPDATED fiddle

注意：将所有内容都包含在$(document).ready函数中。

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

1 个答案: