使用 bootstrap 有一个简单的形式。为了进行验证,我使用了“必需”的引导程序,效果很好。
但在我的表单中,我根据单选按钮隐藏带有查询的输入字段。
我的问题是提交表单需要隐藏的输入字段。我怎样才能跳过这个。我不想验证隐藏的输入。
Error: https://www.screencast.com/t/ObpmoXfGE9 https://www.screencast.com/t/ObpmoXfGE9
当您根据单选按钮值隐藏表单输入时,请从这些输入中删除所需的属性。
这样隐藏的输入将不会得到验证。
$("#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");
});
$(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>
更新的小提琴 https://jsfiddle.net/zcLn6ct6/2/
注意:把所有东西都包在里面$(document).ready
功能。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)