2010-04-13 18 views
43

He leído su respuesta con respecto al validador de jQuery donde se resume un método para verificar un nombre de usuario contra un valor en una base de datos.jQuery validador y una regla personalizada que utiliza AJAX

He intentado implementar este método, pero no importa lo que devuelva el archivo PHP, siempre recibo el mensaje de que el nombre de usuario ya está tomado.

Aquí es muy amigable método personalizado ...

$.validator.addMethod("uniqueUserName", function(value, element) { 
    $.ajax({ 
     type: "POST", 
     url: "php/get_save_status.php", 
     data: "checkUsername="+value, 
     dataType:"html", 
    success: function(msg) 
    { 
     // if the user exists, it returns a string "true" 
     if(msg == "true") 
     return false; // already exists 
     return true;  // username is free to use 
    } 
})}, "Username is Already Taken"); 

Y aquí es el código de validación ...

username: { 
    required: true, 
    uniqueUserName: true 
}, 

¿Hay una manera específica supone que tengo que devolver el mensaje de php.

Gracias

Un

Respuesta

57

Usted está haciendo una petición AJAX, ergo: la validación ya está terminado de funcionar cuando sus declaraciones validador personalizado ya sea verdadera o falsa.

Deberá trabajar con async. Ver también este post: How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

Algo así como:

function myValidator() { 
    var isSuccess = false; 

    $.ajax({ url: "", 
      data: {}, 
      async: false, 
      success: 
       function(msg) { isSuccess = msg === "true" ? true : false } 
      }); 
    return isSuccess; 
} 

Advertencia:

As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().

+0

Gracias. ¡Tu respuesta funcionó bien! – thatweblook

+0

@thatweblook puede dar su código de muestra trabajado – prashu132

+0

Para hacerlo funcionar, tuve que cambiar msg === "verdadero" a msg === verdadero (Firefox). ¡Gracias por la solución, por cierto! – ndemoreau

54

Para cualquier otra persona que se topa con esto, validar el método 'a distancia' soportes, que pueden no tener existió en 2010:

http://docs.jquery.com/Plugins/Validation/Methods/remote

+0

¿Esto está haciendo una solicitud asincrónica o una solicitud de sincronización? – Raghav

+0

@Raghav, esta es una validación asincrónica – ekkis

+0

¿podría dejarme saber cómo retrasar esta solicitud remota? – Jaswinder

7

Me llevó mucho tiempo descubrir cómo obtener una cadena jsonificada que contenga el valor de un elemento de la página en la solicitud remota; esto es el resultado de una combinación de muchas horas y de intentar muchos resultados de búsqueda.

puntos clave:

  1. ha quedado en desuso async:false,
  2. la llamada de función justo después remote: es la clave para la creación de la cadena de datos con el valor del elemento. Al intentar acceder a un valor actual desde el formulario después de data: se devolvía un valor en blanco para el campo con dataType establecido como json.

    $("#EmailAddress").rules("add", { 
        required: true, 
        remote: function() { // the function allows the creation of the data string 
              // outside of the remote call itself, which would not 
              // return a current value from the form. 
         var emailData = "{'address':'" + 
             $('#SignupForm :input[id$="EmailAddress"]').val() + 
             "'}"; 
         var r = { 
          url: "foobar.aspx/IsEmailAvailable", 
          type: "post", 
          dataType: "json", 
          contentType: "application/json; charset=utf-8", 
          cache: false, 
          data: emailData, 
          dataFilter: function(response) { 
           this.email_run = true; //fix for race condition with next button 
           return isAvailable(data); //return true or false 
          } 
         }; 
         return r; 
        }, 
        messages: { 
         remote: "* Email in use" 
        } 
    }); 
    

.página ASPX:

<input id="EmailAddress" required name="Email" type="email" placeholder="Email Address*" runat="server"/> 

C# código subyacente:

[WebMethod] 
    public static object IsEmailAvailable(string address){...} 

Formatear el objeto respuesta:

function isAvailable(data) { 
    var response = JSON.parse(getJsonObject(data)); 
    return (response.isAvailable === "True") ? true : false; 
}; 

//transform response string to a JavaScript Object() 
//http://encosia.com/never-worry-about-asp-net-ajaxs-d-again/ 
function getJsonObject(data) { 
    var msg = eval('(' + data + ')'); 
    if (msg.hasOwnProperty('d')) 
     return msg.d; 
    else 
     return msg; 
}; 
+0

con respecto a su estado de cuenta - '1. async: false ha quedado obsoleto, '.. Sí, PERO aún está permitido siempre que utilice la devolución de llamada/manejador apropiado como (' complete: ',' ​​success: ',' ​​error: ') en lugar de un método Promise como' .then' o '.done' ... Consulte la siguiente referencia aquí ==> http://bugs.jquery.com/ticket/11013#comment:40 – CodeBurner

Cuestiones relacionadas