JQuery 验证问题：我在同一页面上有 2 个表单，每个表单在 2 个不同的选项卡中，但只有一个验证不起作用
Posted
技术标签:
【中文标题】JQuery 验证问题：我在同一页面上有 2 个表单，每个表单在 2 个不同的选项卡中，但只有一个验证不起作用【英文标题】：JQuery validate problem: I have 2 forms on the same page, each one in 2 different tabs but only one the validation is not working 【发布时间】：2021-11-17 05:50:41 【问题描述】：我在同一页面上有 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);
);
)
【问题讨论】：
您在帖子中倾倒了太多不相关的代码。除了 jQuery，只需要每个表单的 RENDERED 标记代码。和 jQuery Validation Engine 不是同一个插件。请不要标记垃圾邮件。已编辑。谢谢。 【参考方案1】：$('#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() ...
【讨论】：
以上是关于JQuery 验证问题：我在同一页面上有 2 个表单，每个表单在 2 个不同的选项卡中，但只有一个验证不起作用的主要内容，如果未能解决你的问题，请参考以下文章
当同一页面上有两个菜单实例时，Jquery mmenu 不起作用