jquery - 如果选择框选项更改，则 JQuery 验证不起作用

Question

我有一个提交表单，我检查是否选择了某种类型的选项我的验证会根据它进行更改，但它无法以某种方式工作，任何机构都可以帮助我这是我的 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">&nbsp;</td>

            </tr>
            <tr>
                <td style="width:301px;text-align:right; vertical-align:top;"><label><font size="4" color="Red">*</font>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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">&nbsp;</td>

            </tr>
            <tr>
                <td>&nbsp;</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 选择

Answer 1

这比您想象的要容易得多 - 默认情况下，jQuery 验证插件会忽略隐藏字段，从而为您提供“开箱即用”所需的功能。你需要做的是

首先确保您的插件版本 >= 1.9.0，然后

1. 为整个表单设置验证
2. 使用 getForm(...) 函数隐藏和显示表单的两个部分
3. 让 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>