Uso de la función remota de validación jQuery

Question

que estoy tratando de averiguar cómo puedo convertir esto:

$('#username').blur(function(){ 
    $.post('register/isUsernameAvailable', 
      {"username":$('#username').val()}, 
      function(data){ 
       if(data.username == "found"){ 
        alert('username already in use'); 
       } 
      }, 'json'); 
}); 

en algo parecido a esto:

rules: { 
     username: { 
      minlength: 6, 
      maxlength: 12, 
      remote: { 
       url: 'register/isUsernameAvailable', 
       type: 'post', 
       data: { 
        'username': $('#username').val() 
       } 

      } 
     } 

Sin embargo estoy teniendo un duro hora de terminarlo. Lo que quiero es en lugar de la alerta para que muestre el mensaje de error, pero puedo configurar el mensaje dentro de los mensajes de validación de jquery reales.

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

ACTUALIZACIÓN:

Por alguna razón no es hacerlo como un POST su haciéndolo como una petición GET y no está seguro de por qué. Aquí está el código de actualización:

rules: { 
     username: { 
      minlength: 6, 
      maxlength: 12, 
      remote: { 
       url: 'register/isUsernameAvailable', 
       dataType: 'post', 
       data: { 
        'username': $('#username').val() 
       }, 
       success: function(data) { 
        if (data.username == 'found') 
        { 
         message: { 
          username: 'The username is already in use!' 
         } 
        } 
       } 

      } 
     }, 

ACTUALIZACIÓN 2:

Ahora estoy llegando a alguna parte he vuelto a conseguir la solicitud POST. Tengo dos problemas más. Una de ellas es el hecho de que para que se realice otra solicitud POST, el usuario debe actualizar el formulario. Y el último problema es que si se encuentra el nombre de usuario devuelto, NO muestra el mensaje de error.

rules: { 
     username: { 
      minlength: 6, 
      maxlength: 12, 
      remote: { 
       type: 'post', 
       url: 'register/isUsernameAvailable', 
       data: { 
        'username': $('#username').val() 
       }, 
       dataType: 'json', 
       success: function(data) { 
        if (data.username == 'found') 
        { 
         message: { 
          username: 'The username is already in use!' 
         } 
        } 
       } 

      } 
     }, 

UPDATE:

public function isUsernameAvailable() 
{ 
    if ($this->usersmodel->isUsernameAvailable($this->input->post('username'))) 
    { 
     return false; 
    } 
    else 
    { 
     return true; 
    }   
} 

ACTUALIZACIÓN 4:

controlador:

public function isUsernameAvailable() 
{ 
    if ($this->usersmodel->isUsernameAvailable($this->input->post('username'))) 
    { 
     return false; 
    } 
    else 
    { 
     return true; 
    }   
} 

public function isEmailAvailable() 
{ 
    if ($this->usersmodel->isEmailAvailable($this->input->post('emailAddress'))) 
    { 
     return false; 
    } 
    else 
    { 
     return true; 
    }   
} 

MODELO:

/** 
* Check if username available for registering 
* 
* @param string 
* @return bool 
*/ 
function isUsernameAvailable($username) 
{ 
    $this->db->select('username'); 
    $this->db->where('LOWER(username)=', strtolower($username)); 
    $query = $this->db->get($this->usersTable); 
    if ($query->num_rows() == 0) 
    { 
     return true; 
    } 
    else 
    { 
     return false; 
    } 
} 

/** 
* Check if email available for registering 
* 
* @param string 
* @return bool 
*/ 
function isEmailAvailable($email) 
{ 
    $this->db->select('email'); 
    $this->db->where('LOWER(email)=', strtolower($email)); 
    $query = $this->db->get($this->usersTable); 
    if($query->num_rows() == 0) 
    { 
     return true; 
    } 
    else 
    { 
     return false; 
    } 
} 

Answer 1

Bueno, no conozco el concepto de tu complemento específicamente, pero supongo que quieres que lo compruebes con ese complemento si el nombre de usuario es mayor que 6 o menor que 12. Lo cual desde tu núcleo con jQuery sin el complemento sería sea ​​tan simple como agregar un pequeño if-else al concepto.

$('#username').blur(function(){ 
    if($('#username').val().length < 6 || $('#username').val().length > 12) 
    { 
     alert('Username must be between 6 and 12 characters'); 
    } 
    else 
    { 
     $.post('register/isUsernameAvailable', 
       {"username":$('#username').val()}, 
       function(data){ 
        if(data.username == "found"){ 
         alert('username already in use'); 
        } 
       }, 'json'); 
    } 
}); 

Answer 2

La forma más sencilla de lograr esto es simplemente volver true, un mensaje de error como una cadena, o false de su recurso en el servidor. De acuerdo con la jQuery validate documentation for remote:

La respuesta se evalúa como JSON y debe ser cierto para los elementos válidos, y puede ser cualquier falso, sin definir o nulo para elementos no válidos, usando el mensaje predeterminado; o una cadena, ej. "Ese nombre ya está tomado, pruebe peter123 en su lugar" para mostrar como el mensaje de error.

Esto significa que si usted puede cambiar su código de servidor para volver true en el caso de una validación exitosa o un mensaje de error ("nombre de usuario ya está en uso") en el caso de la validación sin éxito, usted podría escribir el siguiente regla remoto:

remote: { 
    type: 'post', 
    url: 'register/isUsernameAvailable', 
    data: { 
     'username': function() { return $('#username').val(); } 
    }, 
    dataType: 'json' 
} 

también podría simplemente volver true o false de su recurso en el servidor y definir el mensaje de error en el cliente. En ese caso, tendría la regla anterior y luego de una propiedad en el objeto messages:

messages: { 
    username: { 
     remote: "username already in use" 
    } 
} 

Answer 3

Sé que es demasiado tarde, pero esto podría ayudar a otras personas.

El método remoto está destinado a recibir una cadena JSON, por lo que su lado del servidor debe ser devolver algo como esto con el método ...

echo(json_encode(true)); // if there's nothing matching 
echo(json_encode(false)); 

Este es un ejemplo del código JS que escribí mientras tratando de validar el apodo del usuario.

$(document).ready(function(){ 
      $('#form').validate({ 
      rules: { 
       user_nickname: { 
        remote: { 
         url: "available.php", 
         type: "post", 
         data: { 
          user_nickname: function() { 
          return $("#user_nickname").val(); 
          } 
         } 
         }    
       } 
      }, 
      messages:{ 
       user_nickname: { 
        remote: "Username already taken" 
       } 
      } 
     });}); 

Espero que ayude a alguien, me ayudó.

Answer 4

Necesitaba hacer la validación remota en un proyecto de rieles recientemente y tuve dificultades para enviar la respuesta correcta desde el lado del servidor si la entrada no es válida. Al final, la solución fue bastante simple.

Si la verificación del servidor devuelve verdadero, puede enviar verdadero o "verdadero", de lo contrario puede devolver cualquier cadena como "El correo electrónico ya existe" o "El correo electrónico no tiene registros MX válidos". Esta cadena se mostrará como el mensaje de validación en el formulario. La única pega es que la cadena de mensaje devuelta desde el servidor debe ser JSON válida y debe estar en este formato - ["El correo electrónico ya existe"].

Alguna explicación sobre cómo depuré y encontré la solución: Consulte a continuación el método remoto en jquery.validate.js. He agregado declaraciones de registro y una función de error a la llamada ajax para depurar. Cuando devolvía una cadena normal desde el servidor, se producía un error jQuery.parseJson.

// http://jqueryvalidation.org/remote-method/ 

remote: function(value, element, param) { 
    if (this.optional(element)) { 
     return "dependency-mismatch"; 
    } 

    var previous = this.previousValue(element), 
     validator, data; 

    if (!this.settings.messages[ element.name ]) { 
     this.settings.messages[ element.name ] = {}; 
    } 
    previous.originalMessage = this.settings.messages[ element.name ].remote; 
    this.settings.messages[ element.name ].remote = previous.message; 

    param = typeof param === "string" && { url: param } || param; 

    if (previous.old === value) { 
     return previous.valid; 
    } 

    previous.old = value; 
    validator = this; 
    this.startRequest(element); 
    data = {}; 
    data[ element.name ] = value; 

    $.ajax($.extend(true, { 
     url: param, 
     mode: "abort", 
     port: "validate" + element.name, 
     dataType: "json", 
     data: data, 
     context: validator.currentForm, 
     success: function(response) { 
      console.log("response is "+response); 
      var valid = response === true || response === "true", 
       errors, message, submitted; 
      console.log("valid is "+valid); 
      validator.settings.messages[ element.name ].remote = previous.originalMessage; 
      if (valid) { 
       submitted = validator.formSubmitted; 
       validator.prepareElement(element); 
       validator.formSubmitted = submitted; 
       validator.successList.push(element); 
       delete validator.invalid[ element.name ]; 
       validator.showErrors(); 
      } else { 
       errors = {}; 
       message = response || validator.defaultMessage(element, "remote"); 
       console.log("else message is "+message); 
       errors[ element.name ] = previous.message = $.isFunction(message) ? message(value) : message; 
       validator.invalid[ element.name ] = true; 
       console.log("else errors[ element.name ] "+errors[ element.name ]); 
       validator.showErrors(errors); 
      } 
      previous.valid = valid; 
      validator.stopRequest(element, valid); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      console.log(xhr.status); 
      console.log(thrownError); 
     } 
    }, param)); 
    return "pending"; 
} 

Answer 5

rules: { 
     username: { 
      minlength: 6, 
      maxlength: 12, 
      remote: 'register/isUsernameAvailable', 
     } 
     } 

que necesita para aprobar nombre de usuario

Answer 6

Comprendo que esto es viejo pero tenía dificultades para conseguir este trabajo, así y quería compartir lo que funcionó para mí.

del lado del cliente código de validación de formularios:

$('#frmAddNew').validate({ 
onkeyup: false, 
rules: { 
    ADID: { 
     required: true, 
     alphanumeric: true, 
     maxlength: 10, 
     remote: { 
      url: "ADIDValidation.cshtml", 
      type: "post", 
      dataType: "json", 
      dataFilter: function (data) { 
       if (data) { 
        var json = $.parseJSON(data); 
        if (json[0]) { 
         return JSON.stringify(json[0].valid) /* will be "true" or whatever the error message is */ 
        } 
       } 
      }, 
      complete: function (data) { 
       /* Additional code to run if the element passes validation */ 
       if (data) { 
        var json = $.parseJSON(data.responseText); 
        if (json[0]) { 
         if (json[0].valid === "true") { 
          $('#FirstName').val(json[0].FirstName); 
          $('#LastName').val(json[0].LastName); 
         } 
        } 
       } 
      } 
     } 
    } 
}, 
messages: { 
    ADID: { 
     required: "Please Enter an ADID of the Employee", 
     alphanumeric: "The ADID Can Only Contain Letters and Numbers", 
     maxlength: "ADID For User's Current Permissions Must Be 10 Characters or Less" 
    } 
}, 
submitHandler: function (form) { 
    form.submit(); 
}, 
errorContainer: $('section.errorCon'), 
errorLabelContainer: $('ol', 'section.errorCon'), 
wrapper: 'li', 
showErrors: function (errors) { 
    var error = this.numberOfInvalids(); 
    var message = error == 1 
     ? 'You missed 1 field:' 
     : 'You missed ' + error + ' fields:'; 
    $('section.errorCon h3').html(message); 
    this.defaultShowErrors(); 
} 
}); 

código del lado del servidor para ADIDValidation.cshtml (estoy usando páginas de afeitar):

@{ 

Layout = null; 

if(IsPost) 
{ 
    var db = Database.Open("<enter connection name>"); 
    var sql = "<enter sql or stored procedure>"; 
    var strADID = Request["ADID"]; 

    var result = db.Query(sql, strADID); 
    IEnumerable<dynamic> response; 

    if(result.Any()) 
    { 
     @* "true" indicates the element passes validation. Additional data can be passed to a callback function *@ 
     response = result.Select(x => new 
     { 
      valid = "true", 
      FirstName = x.FirstName, 
      LastName = x.LastName 
     }); 
    } 

    else 
    { 
     @* The element did not pass validation, the message below will be used as the error message *@ 
     response = new[] { 
      new {valid = "The Employee's ADID '" + strADID.ToString() + "' Is Not Valid. Please Correct and Resubmit"} 
     }; 
    } 

    Json.Write(response, Response.Output); 
} 
}