我有一个关于提交的表单,我检查是否选择了某种类型的选项,我的验证会根据它进行更改,但是它无法以某种方式工作,任何机构都可以帮助我这里是我的HTML表单:
<form method="post" id="addnews" action="/app/index.php/admin/sizes/save" enctype="multipart/form-data" style="margin-top:0px" name="addnews">
<table width="100%" 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 width="100%" 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 width="100%" 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);}else{check('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选择
答案 0 :(得分:1)
这比您想象的容易得多 - jQuery validate插件默认忽略隐藏字段,为您提供“开箱即用”所需的功能。你需要做的是
首先确保你有一个版本的插件&gt; = 1.9.0,然后
(所以你不需要你的支票(...)功能)
保持你的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>