Puede hacerlo de forma asíncrona.
Cree una variable global, la llamo ajax_done_and_successful_flag, que inicializa en falso al comienzo del programa . Configurará esto en verdadero o falso en varios lugares de en sus funciones de Ajax, como la función de éxito Ajax o la función de error de Ajax.
Luego debe agregar un controlador de envío en la parte inferior de su función de validación.
submitHandler: function(form) {
if (ajax_done_and_successful_flag === true) {
form.submit()
}
}
El problema es que el código no se está ejecutando de forma lineal.
Ponga un montón de sentencias console.log de Firebug en su código.
Observe la secuencia de ejecución. Verá que su
respuesta Ajax volverá al último, o siempre que lo desee.
Es por eso que necesita submitHandler AND la bandera global
para forzar la función de validación para esperar los resultados correctos de Ajax
antes de enviar el formulario.
Cualquier salida a la pantalla de la respuesta Ajax , hay que hacer en los funciones Ajax, tales como la función de éxito y la función error.
Debe escribir en la misma ubicación como funciones de éxito/error de la función de validación.
De esta forma los mensajes de error Ajax se mezclan con la función de error de la función de validación.
Este concepto puede parecer un poco complicado.
La idea de mantener en cuenta es que las funciones de éxito y error en la función de validación están escribiendo a la misma ubicación que el éxito y error funciones en la llamada Ajax, y que está bien, que es la forma lo que debería ser.
La ubicación de mis mensajes de error está justo al lado de donde el usuario escribe la entrada. Esto crea una buena experiencia de usuario que creo que está solicitando.
Aquí está mi ejemplo de código. Lo simplifiqué.
Me postulo plug-in de validación de jQuery 1.7.1
y jQuery 1.6
estoy usando Firefox 14.0.1 y también me trataron en Chrome 21,0 éxito.
var ajax_done_and_successful_flag = false;
// Add methods
...
$.validator.addMethod("USERNAME_NOT_DUPLICATE", function (value, element) {
return this.optional(element) || validate_username_not_duplicate();
},
"Duplicate user name.");
// validate
$(document).ready(function () {
$('#register_entry_form form').validate({
rules: {
username: {
required: true,
minlength: 2,
maxlength: 20,
USERNAME_PATTERN: true,
USERNAME_NOT_DUPLICATE: true
},
...
errorPlacement: function (error, element) {
element.closest("div").find(".reg_entry_error").html(error);
},
success: function(label) {
label.text('Success!');
} ,
submitHandler: function(form) {
if (ajax_done_and_successful_flag === true) {
form.submit();
}
}
});
});
/* validation functions*/
function validate_username_not_duplicate() {
var username_value = $('#username').val(); // whatever is typed in
$.ajax({
url: "check_duplicate_username.php",
type: "POST",
data: { username: username_value },
dataType: "text",
cache: false,
//async: false,
timeout: 5000,
error: function (jqXHR, errorType, errorMessage) {
ajax_done_and_successful_flag = false;
if (errorType === "timeout") {
$('#username').closest("div").find(".reg_entry_error").html("Server timeout, try again later");
} else if ...
},
success: function (retString, textStatus,jqXRH) {
if (retString === "yes") { // duplicate name
// output message next to input field
$('#username').closest("div").find(".reg_entry_error").html("Name already taken.");
ajax_done_and_successful_flag = false;
} else if (retString === "no") { // name is okay
// output message next to input field
$('#username').closest("div").find(".reg_entry_error").html("success!");
ajax_done_and_successful_flag = true;
} else {
console.log("in validate_username_duplicate func, success function, string returned was not yes or no.");
$('#username').closest("div").find(".reg_entry_error").html("There are server problems. Try again later.");
ajax_done_and_successful_flag = false;
}
} // end success function
}); // end ajax call
return true; // automatically return true, the true/false is handled in
// the server side program and then the submit handler
}
El reg_entry_error es el lugar justo al lado de la entrada de texto. Aquí hay una muestra de código simplificado del formulario.
<label class="reg_entry_label" for="username">Username</label>
<input class="reg_entry_input" type="text" name="username" id="username" value="" />
<span class="reg_entry_error" id="usernameError" ></span>
Espero que responda a su pregunta.
¿Qué solución acabas de usar? Estoy enfrentando el mismo problema. –