如何基于单选按钮输入跳过带有jQuery的隐藏输入字段的验证(删除必需属性) [英] How to skip validation(remove required attribute) for hidden input fields with jquery based on radio button input

问题描述

a有一个使用bootrap的简单表格.为了进行验证，我使用了很好的bootrap"required".

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.

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

推荐答案

当您隐藏基于单选按钮值的表单输入时，此时会从这些输入中删除所需的属性. 这样，隐藏的输入将不会得到验证.

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");

希望这会有所帮助！

从您的小提琴中我了解到您需要从隐藏的输入中删除必需的属性.假设电梯是可见的，那么您需要从类别和地面输入中删除必需的属性.

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>

更新小提琴

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

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

这篇关于如何基于单选按钮输入跳过带有jQuery的隐藏输入字段的验证(删除必需属性)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！