Eu adicionei validação de jQuery de baixo nível a um formulário no meu projeto jQuery Mobile. Ele funciona perfeito, exceto pelos erros que aparecem dentro das entradas de texto e não abaixo deles. Eu sei que eu poderia usar errorPlacement para usar divs abaixo de minhas entradas para gerar minhas mensagens de erro, mas isso não parece funcionar para menus selecionados.

Então eu tenho 2 perguntas:

Existe algo que eu possa fazer diferente para fazer as mensagens de erro aparecerem abaixo das entradas sem usar errorPlacement?Como posso receber mensagens de erro para mostrar menus se eu tiver que usar errorPlacement?

Aqui está o meu código:

<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>

E aqui está o meu erro 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%;
    }
}