Jquery Mobile Validation 错误位置和选择答案

【问题标题】：Jquery Mobile Validation error position & selectsJquery Mobile Validation 错误位置和选择
【发布时间】：2013-04-14 16:18:36
【问题描述】：

我在我的 jQuery Mobile 项目的表单中添加了 bassistance jQuery 验证。它工作完美，除了错误显示在文本输入内部而不是在它们下方。我知道我可以使用 errorPlacement 来使用输入下方的 div 来输出我的错误消息，但这似乎不适用于选择菜单。

所以我有两个问题：

我是否可以做一些不同的事情来使错误消息显示在输入下方而不使用 errorPlacement？
如果我必须使用 errorPlacement，我如何才能在选择菜单中显示错误消息？

这是我的代码：

<script>
    $('#page').bind('pageinit', function(event) {
        $('#registrationForm').validate({
            rules: {
                firstname: {
                    required: true
                },
                lastname: {
                    required: true
                },
                email: {
                    required: true,
                    email: true,
                    remote: "duplicateCheck.php"
                },
                password: {
                    required: true,
                    minlength: 5
                },
                verify_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                handicap: {
                    required: true,
                    maxlength: 2,
                    digits: true
                },
                stopper: {
                    required: true
                }
            },
            messages: {
                firstname: {
                    required: "Please enter your first name."
                },
                lastname: {
                    required: "Please enter your last name."
                },
                email: {
                    required: "Please enter your email.",
                    email: "Please enter a valid email.",
                },
                password: {
                    required: "Please enter a password.",
                    minlength: "You password must be at least 5 characters long."
                },
                verify_password: {
                    required: "Please enter a password.",
                    minlength: "You password must be at least 5 characters long.",
                    equalTo: "You passwords did not match."
                },
                handicap: {
                    required: "Please enter your handicap.",
                    maxlength: "Your max handicap can't be higher than 99.",
                    digits: "Please only enter numbers."
                },
                stopper: {
                    required: "Please enter the word above."
                }
            },
            errorPlacement: function(error, element) {
                error.appendTo( element.parent().next() );
            }
        });
    });
</script>

这是我的错误 css：

label.error {
    color: red;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.4;
    margin-top: 0.5em;
    width: 100%;
    float: none;
}

@media screen and (orientation: portrait){
    label.error {
        margin-left: 0;
        display: block;
    }
}

@media screen and (orientation: landscape){
    label.error {
        display: inline-block;
        margin-left: 22%;
    }
}

【问题讨论】：

请在标记您的问题时更加小心。 jQuery Validate 和 jQuery Validation Engine 是两个不同的东西。已编辑。
对不起。感谢您修复它。

标签： jquery jquery-mobile jquery-validate

【解决方案1】：

默认情况下，当将 jQuery Validate 插件与 jQuery Mobile 一起使用时，错误消息会显示在输入元素下方。正在删除您的自定义 errorPlacement 回调函数...

简单演示：http://jsfiddle.net/7rXnS/

$(document).on('pageinit', function () {

    $('#registrationForm').validate({
        rules: {
            firstname: {
                required: true
            },
            lastname: {
                required: true
            }
        },
        messages: {
            firstname: {
                required: "Please enter your first name."
            },
            lastname: {
                required: "Please enter your last name."
            }
        }
    });

});

然而，jQuery Mobile 将select 元素包装在div 元素中，因此当插件添加错误label 时，它似乎被放置在@ 987654328@ 元素。要解决此问题，请使用 errorPlacement 回调，如下所示。它检查元素是否为select 元素，然后在最外层的div 包装器之后插入错误label 。如果元素不是select，它只是使用默认位置。

errorPlacement: function (error, element) {
    if (element.is('select')) {
        error.insertAfter(element.parents('div.ui-select'));
    } else {
        error.insertAfter(element);  // default placement
    }
}

DEMO 使用 select: http://jsfiddle.net/QuwkZ/

【讨论】：

【解决方案2】：

顺便提一下，从 Jquery Mobile 1.4.3 开始，这仍然是问题，@Sparky 建议的解决方法修复了它。

【讨论】：