Jquery Mobile验证错误位置和选择

Question

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

所以我有两个问题:

1. 我可以做一些不同的事情来使错误消息显示在输入下方而不使用 errorPlacement 吗？
2. 如果我必须使用 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%;
    }
}

Answer 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 时，它会似乎放置在select元素内部。要解决此问题，请使用 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
    }
}

使用选择进行演示:http://jsfiddle.net/QuwkZ/