jquery - JQuery 验证问题：我在同一页面上有 2 个表单，每个表单在 2 个不同的选项卡中，但只有一个验证不起作用
问题描述
我在同一页面上有 2 个表单，但其中一个的验证不起作用！我不知道为什么.....以下代码显示了 2 个选项卡面板，每个面板包含 1 个表单。第二种形式不会触发任何验证，即使是对空输入的简单检查，但第一种有效！！！！有什么建议可以解决这个问题吗？我读了所有关于它的东西。这是一个遗留代码，请帮助。我不知道该怎么办了:)
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade {% if not page.tab or page.tab == 'searchTab' or page.search_tab == 'variantTab' %}in active{% endif %}" id="searchVariantPane">
<div class="row" style="margin: 32px 0 0 0;">
<form method="get" action="{% url 'phenodbsearch:search' %}" id="searchForm" name="searchForm" class="form-horizontal">...</form>
</div>
</div>
<div role="tabpanel" class="tab-pane fade {% if not page.tab or page.tab == 'searchTab' or page.search_tab == 'geneTab' %}in {% endif %}" id="searchGenePane">
<div class="row" style="margin: 32px 0 0 0;">
<form method="get" action="{% url 'phenodbsearch:searchGene' %}" id="searchGeneForm" name="searchGeneForm" class="form-horizontal">
<div class="row">
<div class="form-group">
<label for="gene" class="col-md-3 control-label">Gene :</label>
<div class="col-md-5">
<input type="search" id="gene" name="gene" class="form-control" value="" placeholder="refgene gene name..." required autofocus />
</div>
</div>
</div>
<fieldset id="varTypeFieldSet" class="text-muted" disabled>
<div class="row">
<div class="form-group">
<label for="variantype" class="col-md-3 control-label">Variant Type (required):</label>
<div class="col-md-5">
<select id="variantype" name="variantype" class="form-control input-md">
<option value="0">Select...</option>
<option value="1">SNV</option>
<option value="2">Indel</option>
</select>
</div>
</div>
</div>
</fieldset>
<div id="variantTypeIndelFold" class="collapse">
<div class="row">
<div class="form-group">
<label class="col-md-3 control-label">Variant Function (required):</label>
<div class="col-md-5">
<select id="refgeneGeneLocationIndel" name="refgeneGeneLocationIndel" class="form-control input-md">
<option value="0">Select...</option>
<option value="1">Frameshift</option>
<option value="2">Nonframeshift</option>
</select>
</div>
</div>
</div>
</div>
<div id="variantTypeSNVFold" class="collapse">
<div class="row">
<div class="form-group">
<label class="col-md-3 control-label">Variant Function (required):</label>
<div class="col-md-5">
<select id="refgeneGeneLocationSNV" name="refgeneGeneLocationSNV" class="form-control input-md">
<option value="0">Select...</option>
<option value="1">Nonsynonymous</option>
<option value="2">Exonic;splicing</option>
<option value="3">Stopgain</option>
<option value="4">Stoploss</option>
</select>
</div>
</div>
</div>
</div>
<fieldset id="gZygosityFieldSet" class="text-muted" disabled>
<div class="row">
<div class="form-group">
<label for="zygosity" class="col-md-3 control-label">Zygosity (required):</label>
<div class="col-md-5">
<select id="zygosity" name="zygosity" class="form-control input-sm selectpicker" multiple>
<option value="1">Heterozygous</option>
<option value="2">Homozygous</option>
<option value="3">Compound heterozygous</option>
<option value="4">All</option>
</select>
</div>
</div>
</div>
</fieldset>
<div class="row">
<p />
</div>
<fieldset id="gFeatureFieldSet" {% if not page.variants and not page.featureIDList %}class="text-muted" disabled{% endif %}>
{% for letter in 'ABCDEF' %}
{% with featureName=page.featureIDList|pElementValue:forloop.counter0 %}
<div id="gFeatureNameFold_{{ letter }}" class="collapse {% if letter in 'ABC' or featureName or page.featureIDList|length == forloop.counter0 %}in{% endif %}">
<div class="row">
<div class="form-group">
{% if forloop.first %}
<label for="features" class="col-md-3 control-label text-nowrap">Features (required):</label>
{% else %}
<div class="col-md-3"></div>
{% endif %}
<div class="col-md-5">
<div class="input-group">
<input type="search" id="gFeatureName_{{ letter }}" name="gFeatureName" class="form-control input-sm gFeatureName" value="{% firstof featureName %}" data-target="#gFeatureNameFold_{{ letter|pIncrement }}" />
<span class="input-group-addon"><input type="checkbox" id="gFeatureExclude_{{ letter }}" class="gFeatureExclude" /> Exclude</span>
</div>
<input type="hidden" id="gFeatureID_{{ letter }}" name="gFeatureID" />
<div id="gFeatureNameAutocomplete_{{ letter }}" class="autocomplete"></div>
</div>
{% if forloop.first %}
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" id="gMatchAllFeatures" name="gMatchAllFeatures" value="true" /> Must match all features
</label>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endwith %}
{% endfor %}
</fieldset>
<div class="row">
<div class="form-group">
<div class="col-md-offset-3 col-md-7">
<p>
Features entered here will be shared with submitters if there is a match, and submission features be shared with you. There are optional, a least three need to be entered to be shared, up to six can be specified.
</p>
</div>
</div>
</div>
<div class="row">
<br />
</div>
<div class="row">
<div class="form-group">
<div class="col-md-offset-3 col-md-2">
<button type="submit" id="searchSubmitGene" class="btn btn-default btn-block" disabled>Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
1. First form validation: works well!!!
$('#searchForm').each(function (){
$(this).validate({
onkeyup: false,
invalidHandler: validatorErrorHandlerFunction,
rules: {
variant: {
required: true,
},
searchSubmit: {
depends: function (element) {
if ($('#variant').val() === "") {
return true
}
}
}
},
messages: {
variant: {
required: 'An variant is required to begin a search',
},
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-feedback has-warning');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-feedback has-warning');
$(element).prev('.glyphicon').remove();
},
errorPlacement: function (error, element) {
$(element).before('<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>');
$(element).after(error);
}
});
});
2. Second form validation => not trigger any validation
$('#searchGeneForm').each(function() {
$(this).validate({
onkeyup: false,
invalidHandler: validatorErrorHandlerFunction,
rules: {
gene: {
required: true,
},
searchSubmitGene: {
depends: function (element) {
if ($('#gene').val() === "") {
return true
}
}
}
},
messages: {
gene: {
required: 'A gene is required to search',
},
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-feedback has-warning');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-feedback has-warning');
$(element).prev('.glyphicon').remove();
},
errorPlacement: function(error, element) {
$(element).before('<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>');
$(element).after(error);
}
});
})
解决方案
$('#searchForm').each(function...
使用该选择器，您正在尝试使用id="searchForm".
然而...
- 您似乎只有一个带有此 ID 的表单
- 但是如果您有两个具有相同 ID 的表单，那么您的HTML 无效，并且一个元素将被完全忽略。
在任何情况下，您都需要选择两者共同的东西。例如，在两个表单上分配相同的类并使用它来代替......
<form id="form_1" class="myFormClass">...</form>
<form id="form_2" class="myFormClass">...</form>
$('.myFormClass').each(function() {...
推荐阅读
- java - 这两种方法有什么区别
- java - 忽略不推荐使用的类和方法的所有检查样式警告
- c# - 单击 AutomationElement 对话框
- angular - 如何从生产构建中完全删除服务？
- javascript - Ajax 和 Php api 的问题
- php - Typo3 LTS9 和 Piwigo
- database - CONCAT 与 Laravel 雄辩地在表字段的两个字段之间
- go - 如何处理谷歌云上的小型项目 - 首选的基础设施/CI 设置是什么
- schedule - check_mk 停机时间 计划停机时间
- .net - 反应式扩展不重叠，串行 GroupBy（或 WindowUntilChange）