jQuery Mobile y jQuery Validator con Dialogs para errores

xalupeao · #1 (**permalink**) 28/05/2013, 12:48

Amigos mios,

estoy creando un formulario para validarlo con jquery validator.

tengo esto.

Código HTML:

Ver original<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register Page</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/localization/messages_es.js"></script>
<style>
 
 
 
</style>
<script>
$(document).ready(function() {
    var errors = '';
    $("#frmLogin").validate({
        onfocusout: false,
        onkeyup: false,
        onclick: false,
        onsubmit: true,
        rules: {
            nombres: {
                required: true
            },
            apellidos: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            telefono: {
                required: true
            }
        },
        errorPlacement: function(error, element) {
            error.appendTo($('#dialog'));
        },
        showErrors: function(errorMap, errorList){
            this.defaultShowErrors();
            $('#dialog').dialog('open');
        },
        submitHandler: function(form) {
            console.log("Call Login Action");
        }
    });
 
    $('#dialog').dialog({
        autoOpen: false,
        modal:true,
        close: function(event, ui) {
            $('#dialog').html('');
        }
    });
});
</script>
</head>
 
<body>
 
<div data-role="page">
    <div data-role="header">
        <a href="index.html" data-rel="back">Home</a>
        <h1>Register Page</h1>
    </div>
 
    <div data-role="content">
 
        <form id="frmLogin" class="validate" method="POST">
            <div data-role="fieldcontain">
                <label for="nombres">Nombres: </label>
                <input type="text" id="nombres" name="nombres" />
            </div>
 
            <div data-role="fieldcontain">
                <label for="apellidos">Apellidos: </label>
                <input type="text" id="apellidos" name="apellidos" />
            </div>
 
            <div data-role="fieldcontain">
                <label for="rut">RUT: </label>
                <input type="text" id="rut" name="rut" />
            </div>
 
            <div data-role="fieldcontain">
                <label for="email">Email: </label>
                <input type="text" id="email" name="email" />
            </div>
 
            <div data-role="fieldcontain">
                <label for="repeat_email">Confirmar Email: </label>
                <input type="text" id="repeat_email" name="repeat_email" />
            </div>
 
            <div data-role="fieldcontain">
                <label for="telefono">Teléfono Móvil: </label>
                <input type="text" id="telefono" name="telefono" />
            </div>
 
            <div class="ui-body ui-body-b">
                <button class="btnLogin" type="submit">Login</button>
            </div>
        </form>
    </div>
 
 
 
    <div data-role="footer">
        <h4>Footer content</h4>
    </div>
</div>
</body>
</html>

segui el ejemplo que se muestra aqui http://forum.jquery.com/topic/jquery...37000004093368

pero no me resulta