Question

正如标题所示，我试图使用添加方法添加动态验证规则，但它们根本不起作用。我可能会调用我的输入并选择错误，我可能不知道我已经基于堆栈上类似主题的此代码的添加位。

以下是我使用

的表单

echo '<form id="first_form" action="#" method="POST" style="border: 0; margin: 0;">';
                    echo '<input type="hidden" value="'.$formid.'" name="formid">';
                    echo '<h1>Season, Patch version & amount of champions</h1>';
                    echo '<select id="season" name="season" onchange="checkseason();">';
                        echo '<option value="newseasons" name="newseasons" selected>Season 3+</option>';
                        echo '<option value="oldseasons" name="oldseasons">Season 1, 2</option>';
                    echo '</select>';
                    echo '<input id="patch" type="text" name="patch" placeholder="e.g. 4.20" required autofocus><br/>';
                    echo '<input placeholder="Number of Champions" value="1" type="number" name="champ_number" min="1" max="20" required><br/>';
                    echo '<input type="submit" value="next">';
                echo '</form>';

这是我的jquery / javascript代码

function checkseason(){
            d = document.getElementById("season").value;

                    $('#first_form').validate({
                        rules: {
                            patch: {
                                required: true,
                                remote: {
                                    url: "../checkpatch.php",
                                    type: "post"
                                    }
                                }
                            },
                        messages: {
                            patch: {
                                required: "Please enter patch version.",
                                remote: "Patch with this number already exists."
                                }
                            },

                    });


                $('select[name="season"]').on('change', function () {
                    if ($(this).val() == "newseasons") {
                        $('option[name="newseasons"]').rules('add', {
                            minlength: 4,
                             messages: {
                                minlength: "Please enter 3 numbers"
                            }
                        });
                    } else if ($(this).val() == "oldseasons") {
                        $('option[name="oldseasons"]').rules('add', {
                            minlength: 8,
                            messages: {
                                minlength: "Please enter 8 numbers"
                            }
                        });
                    }
                });

        }

更新：代码现在可以处理精细消息和最小长度更改，但表单不包括启动限制我必须在这两个下拉选项之间切换以激活它们。

function checkseason(){
            d = document.getElementById("season").value;

                    $('#first_form').validate({
                        rules: {
                            patch: {
                                required: true,
                                remote: {
                                    url: "../checkpatch.php",
                                    type: "post"
                                    }
                                }
                            },
                        messages: {
                            patch: {
                                required: "Please enter patch version.",
                                remote: "Patch with this number already exists."
                                }
                            },

                    });


                $('select[name="season"]').on('change', function () {
                    if ($(this).val() == "newseasons") {
                        $('input[name="patch"]').rules('add', {
                            minlength: 4,
                            maxlength: 4,
                             messages: {
                                minlength: "Please enter 3 numbers"
                            }
                        });
                    } else if ($(this).val() == "oldseasons") {
                        $('input[name="patch"]').rules('add', {
                            minlength: 8,
                            maxlength: 9,
                            messages: {
                                minlength: "Please enter 8 numbers"
                            }
                        });
                    }
                });
        }
$(document).ready(function(){


            checkseason();
});

Answer 1

$('option[name="oldseasons"]').rules('add', ....

您无法将规则附加到<option>元素。 （AFAIK，<option>也不能包含name属性。）

规则只能附加到各种类型的<select>，<textarea>和<input>元素。

就您的代码而言，可能是一个错字，但只要<select>本身发生更改，就无法更改<select>元素的规则。用户永远无法满足这一要求。也许你的意思是将规则附加到别的东西上。

我还注意到您已经使用HTML5验证属性内联定义了规则。虽然jQuery Validation插件可以选择这些，但您也可以在.validate()方法中定义规则。您应该保持一致，以便您的代码更易于理解和维护。要么内联声明所有验证规则，要么在.validate()内声明它们全部，尽量不要将这两种技术混合在一起。

.validate()方法用于 初始化 插件，除了DOM就绪之外，不会进入任何函数或处理程序。您正在使用内联onchange处理程序来调用您的函数。当你已经拥有一个jQuery change处理程序时，这没有任何意义。

只需使用DOM就绪处理程序......

$(document).ready(function() {

    $('#first_form').validate({  // initialize plugin
        ....
    });

    $('select[name="season"]').on('change', function () {  // your select change handler
        // your '.rules()' methods, etc.
    });

});

删除 HTML标记中的内联onchange处理程序。

<select id="season" name="season">
    ....

我认为当你做出选择时，你会希望patch的规则发生变化。然后，您可以将.rules()附加到patch;不是select而不是form。

更新....但表单不包括启动限制我必须在这两个下拉选项之间切换才能激活它们

您需要初始 minlength＆amp;页面加载时maxlenth的{{1}}规则集（在patch内执行此操作）。否则，在第一次更改.validate()之前，默认选择将没有相关规则。
由于错误消息相同，因此您无需为每种情况更改错误消息。
从select元素中删除name属性。它们不用于任何东西。
删除<option>的内嵌HTML5验证属性，因为您已使用patch和.validate()方法声明规则。

工作演示：http://jsfiddle.net/yaw41bd3/

使用选择输入动态更改验证规则

1 个答案: