Question

有没有办法从equalTo方法访问当前元素？在下面的代码中，如果我将其更改为

，则可以使用它

equalTo: "#" + $("#t2").parent().parent().find("input[name='thing1']").attr("id")

但我宁愿不加硬编码。

我搜索了stackoverflow，找不到任何有用的答案。

注意：我意识到这不是编写此表单的最佳方式。我对命名方案无能为力。

<!DOCTYPE html>
<html>
<head>
    <!-- include jQuery and the validate plugin -->
    <script>
    $(document).ready(function(){
        $.validator.prototype.checkForm = function () {
            this.prepareForm();
            for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) {
                if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) {
                    for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) {
                        this.check(this.findByName(elements[i].name)[cnt]);
                    }
                } else {
                    this.check(elements[i]);
                }
            }
            return this.valid();
        }

        $("#formthing").validate({
            rules: {
                thing1: "required",
                thing2: {
                    required: true,
                    equalTo: "#" + $(this).parent().parent().find("input[name='thing1']").attr("id")
                }
            },
            messages: {
                thing1: "Please enter somthing",
                thing2: {
                    required: "Please repeat somthing",
                    equalTo: "Be sure it's equal"
                }
            }
        });
    });
    </script>
</head>
<body>
    <form id="formthing" method="post" action="http://mcclurg.co/">
        <div>
            <div><label for="t1">Thing 1 </label><input type="text" name="thing1" id="t1" /></div>
            <div><label for="t2">Thing 2 </label><input type="text" name="thing2" id="t2" /></div>
        </div>
        <br /><br />
        <div>
            <div><label for="t3">Thing 1' </label><input type="text" name="thing1" id="t3" /></div>
            <div><label for="t4">Thing 2' </label><input type="text" name="thing2" id="t4" /></div>
        </div>
        <br /><br />
        <input type="submit" value="Stuff man" />
    </form>
</body>
</html>

Answer 1

插入新方法。该方法将接收该元素，您可以从那里执行验证。使用此方法代替默认的equalTo方法。

$.validator.addMethod("equalToPrevious", function(value, element) {
    if(value) {
        return $(element).val() === $(element).parent().parent().find("input[name='thing1']").val();
    } else {
        return true;
    }
});

请务必修改验证规则和消息。

$("#formthing").validate({
        rules: {
            thing1: "required",
            thing2: {
                required: true,
                equalToPrevious: true
            }
        },
        messages: {
            thing1: "Please enter somthing",
            thing2: {
                required: "Please repeat somthing",
                equalToPrevious: "Be sure it's equal"
            }
        }
    });

可以将其修改为传递给它的值（如果您愿意，可以使用您要查找的字段的名称）。

Answer 2

根本问题是您正在复制字段名称。您有两个名为thing1的字段和两个名为thing2的字段。该插件无法很好地处理，特别是因为此插件使用name属性来跟踪所有输入元素。

根据规定，只需提供唯一 name的所有内容即可。

DEMO：http://jsfiddle.net/15s6x8pm/

$("#formthing").validate({
    rules: {
        thing1: "required",
        thing2: {
            required: true,
            equalTo: "thing1"
        },
        thing11: "required",
        thing22: {
            required: true,
            equalTo: "thing11"
        }
    }, ....

jQuery验证equalTo方法：访问当前元素

2 个答案: