使用jQuery验证在单独的div中显示错误消息 [英] Display Error Message in a separate div using jQuery validation

问题描述

我正在使用jQuery验证，并且想在div中显示错误消息.<div class="alert alert-error" id="errorContainer">在表单下方显示的默认设置不适用于我的表单设计.

I am using jQuery validation and I am wanting to display the error message in a div <div class="alert alert-error" id="errorContainer"> The default of showing below the forms does not work with my form design.

验证脚本链接到表单所在的页面，它看起来像:

The validation script is linked to the page I have the form on and it looks like:

    $(function validate() {

    var rules = {
                rules: {
                    full_name: {
                        minlength: 2,
                        maxlength: 50,
                        required: true
                    },
                    address: {
                        minlength: 5,
                        required: true
                    },
                    city: {
                        minlength: 2,
                        required: true
                    },
                    state: {
                        minlength: 2,
                        maxlength: 2,
                        required: true
                    },
                    zip: {
                        minlength:5, 
                        maxlength:5,
                        required: true
                    },
                    phone: {
                        required: true,
                        phoneUS: true
                    },
                    phone_other: {
                        required: true,
                        phoneUS: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    date_to_start: {
                        required: true
                    },
                    ssn: {
                        required: true,
                        ssn: true,
                    },
                    salary: {
                        required: true
                    }

                }
            };

        var validationObj = $.extend (rules, Application.validationRules);

        $('#employment-application').validate(validationObj);

});

现在，我确实尝试将$('#employment-application').validate(validationObj);更改为以下代码，并尝试将其添加到表单所在页面的底部，但均给出了负面结果.该脚本似乎将style="display:none;"添加到errorContainer，并且不会在任何地方加载任何错误.

Now I did try changing $('#employment-application').validate(validationObj); to the code below as well as tried adding it to the bottom of the page I have the form on, both gave negative results. The script seems to add style="display:none;" to the errorContainer and does not load any errors anywhere.

(尝试将$('#employment-application').validate(validationObj);更改为以下内容)

(tried changing $('#employment-application').validate(validationObj); to the below)

$("#employment-application").validate({
        errorContainer: "#errorContainer", 
        errorLabelContainer: "#errorContainer", 
        errorElement: "li"
    })

因此，我想重述一下，我想使用jQuery表单验证并在单独的div中显示收到的错误消息，因为默认设置不适用于我的表单设计.

So re-cap, I am wanting to use jQuery Form Validation and display the error messages received in a separate div because the default does not work with my form design.

推荐答案

您可以使用errorPlacement选项传递这样的回调: http ://jsfiddle.net/cMhQ7/

You can use the errorPlacement option to pass a callback like this: http://jsfiddle.net/cMhQ7/

我使用了div id的标准，即输入元素的名称与_validate后缀串联在一起，但是您可以根据需要进行更改.

I've used a standard of the div id being the input element's name concatenated with a _validate suffix but you can change as you wish.

HTML

<form id="employment-application" method="post">
    <input name="full_name" type="text" />
    <div id="full_name_validate"></div>
    <input type="submit" />
</form>

JavaScript

Javascript

$(function validate() {

    var rules = {
        rules: {
            full_name: {
                minlength: 2,
                maxlength: 50,
                required: true
            },
        },
        errorPlacement: function (error, element) {
            var name = $(element).attr("name");
            error.appendTo($("#" + name + "_validate"));
        },
    };

    $('#employment-application').validate(rules);

});

这篇关于使用jQuery验证在单独的div中显示错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！