2010-06-17 2 views
5

Estoy usando el complemento JQuery Validation para la validación del formulario del lado del cliente. Además del estilo colorido en campos de formulario no válidos, mi cliente requiere que se muestre un mensaje emergente. Solo quiero mostrar este mensaje cuando haga clic en el botón Enviar, ya que de lo contrario volvería loco al usuario. Probé el siguiente código, pero errorList siempre está vacío. Alguien sabe la forma correcta de hacer algo similar.Cómo usar JQuery Validate para crear una ventana emergente con todos los errores de formulario cuando se hace clic en el botón Enviar?

function popupFormErrors(formId) { 
    var validator = $(formId).validate(); 
    var message = ''; 
    for (var i = 0; i < validator.errorList.length - 1; i++) { 
    message += validator.errorList[i].message + '\n'; 
    } 

    if (message.length > 0) { 
    alert(message); 
    } 
} 

$('#btn-form-submit').click(function(){ 
    $('#form-register').submit(); 
    popupFormErrors('#btn-form-submit'); 
    return false; 
}); 

$('#form-register').validate({ 
    errorPlacement: function(error, element) {/* no room on page */}, 
    highlight: function(element) { $(element).addClass('invalid-input'); }, 
    unhighlight: function(element) { $(element).removeClass('invalid-input'); }, 
    ... 
}); 

actualización A partir de la información en la respuesta aceptada me ocurrió esto.

var submitClicked = false; 

$('#btn-form-submit').click(function() { 
    submitClicked = true; 
    $('#form-register').submit();  
    return false; 
}); 

$('#form-register').validate({ 
    errorPlacement: function(error, element) {/* no room on page */}, 
    highlight: function(element) { $(element).addClass('invalid-input'); }, 
    unhighlight: function(element) { $(element).removeClass('invalid-input'); }, 
    showErrors: function(errorsObj) { 
    this.defaultShowErrors(); 
    if (submitClicked) { 
     submitClicked = false; 
     ... create popup from errorsObj... 
    } 
    } 
    ... 
}); 

Respuesta

3

realmente debería buscar en el uso de la siguiente opción para jQuery Validación

showErrors 

aquí hay un enlace a la documentación http://docs.jquery.com/Plugins/Validation/validate#options

+0

Gracias por la ayuda. ¿Hay alguna manera de mantener la función showErrors original (agrega/elimina la clase 'invalid-input' de los elementos del formulario) y aún incluye parte de mi propio código? –

+1

para usar la función show original errors. Use this.defaultShowErrors –

Cuestiones relacionadas