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元素,然后插入错误label 之后最外面的div包装.如果元素不是a select,则只使用默认位置.

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

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