如果选择框选项更改，则 JQuery 验证不起作用
Posted
技术标签:
【中文标题】如果选择框选项更改，则 JQuery 验证不起作用【英文标题】：JQuery Validation not working if select box option changed 【发布时间】：2012-12-25 18:23:49 【问题描述】：我有一个提交表单，我检查是否选择了某种类型的选项我的验证会根据它进行更改，但它无法正常工作，任何机构都可以帮助我这是我的 html 表单：
<form method="post" id="addnews" action="/app/index.php/admin/sizes/save" enctype="multipart/form-data" style="margin-top:0px" name="addnews">
<table class="font">
<tbody><tr>
<td colspan="2"><span style="color: rgb(204, 0, 0); padding-left: 302px;">( Note:Fields marked with * are required )</span></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td style="width:301px;text-align:right; vertical-align:top;"><label><font size="4" color="Red">*</font> Size Type: </label></td>
<td style="text-align:left">
<select onchange="getForm(this.value);" style="width:206px;" name="size_type" id="size_type" class="common_form">
<option value="0">Template</option><option value="1"> Wallart</option> </select>
</td>
</tr>
<tr>
<td colspan="2">
<table cellspacing="3" cellpadding="0" style="display:block inline;" id="templateForm" class="font">
<tbody><tr>
<td style="text-align:right; vertical-align:middle;">
<label><font size="4" color="Red">*</font> Name: </label>
</td>
<td style="text-align:left">
<input type="text" value="" maxlength="200" id="name" name="name" class="common_form">
<label style="display:none;" id="name_lbl">Please enter name</label>
</td>
</tr>
<tr>
<td style="text-align:right; vertical-align:top;"><label><font size="4" color="Red">*</font> Code: </label></td>
<td style="text-align:left">
<input type="text" value="" maxlength="200" id="code" name="code" class="common_form">
<label style="display:none;" id="code_lbl">Please enter code</label>
</td>
</tr>
<tr>
<td style="text-align:right; vertical-align:top;"><label><font size="4" color="Red">*</font> Num Code: </label></td>
<td style="text-align:left">
<input type="text" value="" maxlength="200" id="num_code" name="num_code" class="common_form">
<label style="display:none;" id="numc_lbl">Please enter num code</label>
</td>
</tr>
</tbody></table>
<table cellspacing="3" cellpadding="0" style="display:none;" id="wallartForm" class="font">
<tbody><tr>
<td style="text-align:right; vertical-align:middle;width:299px;">
<label><font size="4" color="Red">*</font> Width: </label>
</td>
<td style="text-align:left">
<input type="text" value="" maxlength="200" id="width" name="width" class="common_form">
</td>
</tr>
<tr>
<td style="text-align:right; vertical-align:top;"><label><font size="4" color="Red">*</font> Height: </label></td>
<td style="text-align:left">
<input type="text" value="" maxlength="200" id="height" name="height" class="common_form">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="text-align:right"><label>Status: </label></td>
<td style="text-align:left">
<input type="radio" checked="checked" value="1" name="is_active">Active
<input type="radio" value="0" name="is_active">Inactive
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td style="text-align:left">
<input type="hidden" value="" name="id" id="id">
<input type="submit" value="Save" id="submitT" onclick="if($('#size_type').val() == 1)check('W',this.form);elsecheck('T',this.form);" class="button115_a">
<input type="button" onclick="back();" value="Back" class="button90_b">
</td>
</tr>
</tbody></table>
</form>
在选择框更改时，如果之前完成了任何验证，我会隐藏表单的某些字段也会重置我的表单：
function getForm(id)
var validator = $("#addnews").validate();
validator.resetForm();
if(id == 1)
$("#templateForm").attr("style","display:none;");
$("#wallartForm").attr("style","display:block inline;");
else
$("#templateForm").attr("style","display:block inline;");
$("#wallartForm").attr("style","display:none;");
这是我的验证函数：
function check(type)
if(type == "T")
$('#addnews').validate(
rules:
name:required:true,
code:required:true,
num_code:required:true
,
messages:
name:required:"<br>Please enter size name",
code:required:"<br>Please enter size code",
num_code:required:"<br>Please enter size num code"
);
else
alert("yes")
$('#addnews').validate(
rules:
width:required:true,
height:required:true
,
messages:
width:required:"<br>Please enter width",
height:required:"<br>Please enter height"
);
验证适用于模板选择，但不适用于 wallart 选择
【问题讨论】：
【参考方案1】：这比您想象的要容易得多 - 默认情况下，jQuery 验证插件会忽略隐藏字段，从而为您提供“开箱即用”所需的功能。你需要做的是
首先确保您的插件版本>= 1.9.0，然后
-
为整个表单设置验证
使用 getForm(...) 函数隐藏和显示表单的两个部分
让 jQuery 验证完成剩下的工作
（所以你不需要你的 check(...) 函数）
保持你的 html 不变，用这个替换你的脚本
<script>
function getForm(id)
if (id == 1)
$("#templateForm").attr("style", "display:none;");
$("#wallartForm").attr("style", "display:block inline;");
else
$("#templateForm").attr("style", "display:block inline;");
$("#wallartForm").attr("style", "display:none;");
$(function ()
$('#addnews').validate(
rules:
name: required: true ,
code: required: true ,
num_code: required: true ,
width: required: true ,
height: required: true
,
messages:
name: required: "<br>Please enter size name" ,
code: required: "<br>Please enter size code" ,
num_code: required: "<br>Please enter size num code" ,
width: required: "<br>Please enter width" ,
height: required: "<br>Please enter height"
,
submitHandler: function ()
alert('form is valid');
);
);
</script>
【讨论】：
实际上不工作它确实对隐藏元素应用验证，我也检查了 jquery 验证的版本 抱歉，您需要从提交按钮中删除 onclick 处理程序。小提琴在这里jsfiddle.net/3pp6Y/1 谢谢，我不知道为什么它在我的项目中不起作用，但它肯定是正确的答案，因为我在 jsfiddle 上对其进行了测试，感谢伙伴的帮助以上是关于如果选择框选项更改，则 JQuery 验证不起作用的主要内容，如果未能解决你的问题，请参考以下文章
在 Jquery .html 替换新 div 上的整个 div 选择器后不起作用