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>

Selectboxの変更時に、フォームの特定のフィールドを非表示にします。以前に検証が行われた場合は、フォームもリセットします。

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（...）関数を使用して、フォームの2つの部分を表示および非表示にします
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>