validación de campo de texto jQuery contra json/array

Estoy buscando una solución para validar la entrada de un campo de texto contra una matriz proporcionada por un archivo json. Por ejemplo: Para comprobar dentro de un formulario de registro, si ya existe el usuario deseado.

¿Alguien puede ayudar con un ejemplo de trabajo, complemento, secuencia de comandos o tutorial?

El 'usernames.json' se ve así...

{"usernames":["carl","jack","jill"]}

...y se lee con...

$.getJSON("usernames.json", function(names) {
var invalidName = names;

yo seguiria con...

jQuery.validator.addMethod

... pero de aquí en adelante, estoy atascado.

Si alguien puede ayudar con un ejemplo de trabajo, ¡estaría muy contento!

////////////////////////////////////////////////// //

EDITAR: Gracias a Utkanos y Pavel Staseljun, pude encontrar la siguiente solución, ¡que solo se probó de manera aproximada! Encuentre también el ejemplo de Utkanos a continuación, porque este incluye el manejo de "keyup" en lugar de "enviar" y no incluye una verificación "obligatoria". "#errorresponse" es el div, donde se puede mostrar un mensaje de error.

$.ajax({
  url: "http://yoururlto.json?callback=?",
  dataType:"jsonp",
  jsonpCallback: '?',
  async: false,
  success: function(json) {
        $('#user').keyup(function(evt) {
        var jsonarray = json.usernames;
        var userinput = $('#user').val().toLowerCase()
        var check = $.inArray(userinput, jsonarray);
        if (check !== -1) {
            $("#errorresponse").text('Thanks to Utkanos and Pavel Staseljun!');
            }
        })
      }
});

preguntado el 31 de julio de 12 a las 10:07

3 Respuestas

HTML

<form id='signup'>
    <label>Choose a username</label>
    <input type='text' id='user' />
    <input type='submit' value='submit' />
</form>

JS/jQuery

$.getJSON("usernames.json", function(json) {
    $('#signup').on('submit', function(evt) {
        var user = $('#user').val(), error;
        if (!user)
            error = 'no username entered';
        else if (json.usernames.indexOf(user) != -1)
            error = 'username already taken';
        if (error) { evt.preventDefault(); alert(error); }
    });
});

Respondido 31 Jul 12, 10:07

Creo que el if ($.inArray($('#username').val(), json.usernames)) error = 'username already taken'; en lugar de if (json.usernames.indexOf($('#username').val()) != -1) error = 'username already taken'; es mejor..? - pavel staselun

Bueno, sí, es más multi-navegador. Simplemente me gusta ECMA5 :) - Mitia

¡Muchas gracias a los dos! ¡Esto fue muy útil! :-)- Elvis

¿Por qué desea enviar todos los nombres de usuario desde el servidor a un cliente? Esto suena como una muy mala idea. Haga algo como una función del lado del servidor que verifique un nombre de usuario publicado y devuelva verdadero o falso como válido o no válido.

Respondido 31 Jul 12, 10:07

Porque preferiría algún tipo de validación "sobre la marcha", por lo tanto, json es más rápido. Se supone que esto también funciona en dispositivos móviles; una función del lado del servidor (como php) es imposible en este caso. - Elvis

al usar ajax, puede usar la validación "sobre la marcha" y, especialmente en dispositivos móviles, llegará bastante rápido a un punto en el que mantener una matriz de 10000 nombres de usuario es mucho más lento que una simple solicitud de ajax. Además, parece ser un problema de seguridad si cada cliente puede leer todos sus nombres de usuario. - Kannix

¿Tal vez tenemos un malentendido? Uso ajax/js para la validación en sí. :-) De hecho, he elegido el escenario "nombre de usuario" como ejemplo, para mantener la pregunta más común. Hay dos pasos de validación: uno antes de enviar el formulario (lado del cliente) y otro, cuando el envío se procesa a través de php (lado del servidor). Entonces, en este caso, se trata solo de la solución rápida del lado del cliente. - Elvis

¿No puedes crear un script ajax comprobando si existe un nombre de usuario?

Mucho mejor en mi opinión, porque puede integrarlo directamente con jquery validator usando la opción remota.

Respondido 31 Jul 12, 10:07

Tiene razón, esta puede ser una solución, pero en este caso, estaba buscando una "validación previa" del lado del cliente. - Elvis

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.