Question

我有以下代码

jQuery.validator.addMethod("notEqualTo", function(element, value, param){
    return this.optional(element) || value != param;
});

$(document).ready(function(){
    $("#testform").validate({
        onkeyup: function(element){$(element).valid()},
        onfocusout: false,
        errorContainer: "#errors",
        rules: {
            firstname: {
                minlength: 3,
                required: true
            },
            surname: {
                minlength: 2,
                required: true
            },
            gender: {
                required: true,
                notEqualTo: "select"
            }
        },
        messages: {
            firstname: {
                required: "Zadejte své jméno",
                minlength: "Jméno musí mít délku alespoň 3 znaky"
            },
            surname: {
                required: "Zadejte své příjmení",
                minlength: "Jméno musí mít délku alespoň 2 znaky"
            },
            gender: {
                notEqualTo: "Zvolte pohlaví"
            }
        },
    });
});

ErrorContainer不起作用。所有错误都显示在输入旁边，但不显示在div容器中。但我的表格中有<div id="errors"></div>。 Web浏览器的控制台不显示语法错误。

Answer 1

来自文档：

使用其他容器来显示错误消息。作为errorContainer给出的元素在发生错误时都会显示和隐藏。但是，错误标签本身会添加到以errorLabelContainer给出的元素中，这里是一个无序列表。

这意味着如果您提供errorContainer，则还需要提供errorLabelContainer。或者，您可以单独使用errorLabelContainer。试试这个：

＆＃13;

jQuery.validator.addMethod("notEqualTo", function(element, value, param){
    return this.optional(element) || value != param;
});

$(document).ready(function(){
    $("#testform").validate({
        onkeyup: function(element){$(element).valid()},
        onfocusout: false,
        errorLabelContainer: "#errors",
        rules: {
            firstname: {
                minlength: 3,
                required: true
            },
            surname: {
                minlength: 2,
                required: true
            },
            gender: {
                required: true,
                notEqualTo: "select"
            }
        },
        messages: {
            firstname: {
                required: "Zadejte své jméno",
                minlength: "Jméno musí mít délku alespoň 3 znaky"
            },
            surname: {
                required: "Zadejte své příjmení",
                minlength: "Jméno musí mít délku alespoň 2 znaky"
            },
            gender: {
                notEqualTo: "Zvolte pohlaví"
            }
        },
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<div id="errors"></div>

<form id="testform">
    <input name="firstname" />
    <input name="surname" />
    <input name="gender" />
    <button>Submit</button>
</form>

＆＃13;

错误显示在输入旁边，但不显示在div容器中

1 个答案: