如果选择框选项已更改,则JQuery验证无效

时间:2013-01-11 07:30:39

标签: jquery jquery-plugins jquery-validate

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

1 个答案:

答案 0 :(得分:1)

这比您想象的容易得多 - jQuery validate插件默认忽略隐藏字段,为您提供“开箱即用”所需的功能。你需要做的是

首先确保你有一个版本的插件&gt; = 1.9.0,然后

  1. 设置整个表单的验证
  2. 使用getForm(...)函数
  3. 隐藏并显示表单的两个部分
  4. 让jQuery验证其余的
  5. (所以你不需要你的支票(...)功能)

    保持你的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>