jquery - Jquery Mobile Validation 错误位置和选择

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插入错误。如果元素不是 a ，它只使用默认位置。label divselect

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

演示使用：http select: //jsfiddle.net/QuwkZ/

Answer 2

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