Tengo un formulario en el que se detecta si todos los campos de texto son válidos en cada keyup() y focus(); si todos son válidos, se habilitará el botón enviar para que el usuario presione. Sin embargo, si el usuario rellena en una de las entradas de texto con los navegadores característica autocompletar, evita que el botón de enviar de ser habilitados.

Hay una forma de detectar si alguno de los de entrada ha cambiado, independientemente de cómo se ha modificado, usando jQuery?

  • aquí hay una solución para este problema => este
  • echa un vistazo a mi respuesta aquí
InformationsquelleAutor Ryan | 2010-07-22

9 Comentarios

  1. 15

    El jQuery evento de cambio sólo se activará en el desenfoque. El evento keyup se dispara a medida que escribe. Ni el fuego se hace clic en una función de finalización automática de la opción. Yo también estoy buscando una forma de detectar esto, pero estoy pasando actualmente con

    $(selector).bind("change keyup",function(){
        //Do something, probably with $(this).val()
    });

    Pero no acaba de resolver el problema…

    • He tenido muy buenos resultados con change + keyup hasta ahora.
    • La solución es este.
    • Por desgracia he tenido a downvote esto! Yo tenía el 90% de las buenas experiencias con change keyup pero keyup no se asocia a autocompletar en chrome-casos y change adjuntar autorellenar sólo si el enfoque perderse! Chrome a veces mantener el textcursor en el interior de la entrada de campo después de autorrelleno y no desencadenar el cambio-evento! Tal vez un cromo-solo problema…
    • Sí, yo pensé que había dejado claro en la respuesta.
    • Si usted tiene un 3er campo después de username y password luego change es llamado para username y password cada vez! Esta es una solución para llegar al 100%.
    • Excelente. Post que como una respuesta?

  2. 25

    Usted podría tratar de usar on input para detectar texto basado en cambios (excepto las teclas como ctrl y shift) en <input>‘s.

    Por ejemplo:

    $(input).on('input', function() { 
        console.log($(this).val()); 
    });
    • De entrada no funciona en IE11 cuando las credenciales ya están rellenados por el navegador en la página de carga.
  3. 12

    Yo he utilizado

    $(selector).on("change keyup blur input", function() {});

    que hizo el truco en Chrome. input es lo que hizo el trabajo para autocompletar.

    • No funciona fiabilidad en Chrome. Si hago doble actualizar rápidamente la página, a continuación, esto no coger el autocompletar de valores.
  4. 2

    Mi problema fue la detección de auto-llenado (a través de un plugin como lastpass o 1password) así como el problema descrito más arriba.

    La solución que funcionó para mí fue:

    $(function(){    
        function validate(){
            if($('#email').val() !== '' && $('#password').val() !== '')
                $('#submit').prop('disabled', false);
            else
                $('#submit').prop('disabled', true);
        }
    
        //Validate after user input
        $('#email, #password').on('keyup change', validate);
    
        //Validate on mouse enter of body and login form
        //to catch auto-fills from roboform/1password etc...
        $('body, #loginform').on('mouseenter', validate);
    
        //Validate onload incase of autocomplete/autofill
        validate();
    });

    Ver demo en JSFiddle.

    • sé que esto es viejo, pero no puede hacer usted $("#email, "#password").on("keyup change", validate); lugar?
    • Sí, gracias por señalarlo. He actualizado mi respuesta.
    • Como un FYI – mouseenter se activa aparece en hover, y si bien esto puede funcionar para un administrador de contraseñas, no parece ideal porque activa la validación en vuelo estacionario y el campo no es válido (se enciende en rojo). Este es nitpicky, pero prefiero no dar comentarios negativos sobre pase los eventos. Todavía buscando el unicornio caso de detectar un lastpass fill_in.
  5. 1

    Tengo una solución digna después de tener el mismo problema. Conjunto de keyup como normal para nuestros campos de formulario, a continuación, mouseover los alrededores de la div. Así que una vez que haga clic en la opción de autocompletar, el ratón va a ser sobre la parte superior de la div:

    $("#emailaddress").bind("keyup", function() {
        displayFullSubcribeForm();
    });
    
    $(".center_left_box").bind("mouseover", function() {
        displayFullSubcribeForm();
    });
    • Muchos de los usuarios no utilizan un ratón o bien ficha para enfocar los campos, o toque.
  6. 0

    Podría utilizar el jQuery .cambiar() función.

    Después de que la página se carga por primera vez, usted puede validar el formulario en su totalidad, sólo para comprobar que en realidad no se trata de rellenar. Después de que usted puede utilizar .cambiar() para comprobar si las cosas han cambiado en la forma, y si algo ha cambiado, validar el formulario de nuevo.

    $(document).ready(function() {
       //validate form once, just to be sure (if valid, activate submit button)
    });
    ...
    <form>
      <input class="target" type="text" value="Field 1" />
      <select class="target">
        <option value="option1" selected="selected">Option 1</option>
        <option value="option2">Option 2</option>
      </select>
    </form>
    <script type="text/javascript">     
        $('.target').change(function() {
            alert('Something changed');
            //Try validating form again (if valid, activate submit button)
        });
    </script>

    Plan B

    Otra opción es tener siempre el botón de enviar se puede hacer clic, pero el uso de .submit() para enlazar a la forma de validación. Entonces, si el formulario ES válido, a llevar a cabo. Si el formulario NO ES válido el uso de .preventDefault() para detener la presentación del formulario….. y había de mostrar un mensaje de advertencia demasiado, indicando los campos que faltan.

  7. 0

    Yo quería una muy buena experiencia de usuario en un campo donde no sería válido (tornan de color rojo en mi caso) mientras el usuario estaba razonablemente activo por ejemplo, todavía llenar el campo.

    A hacer esto para la entrada normal, yo era capaz de conectar a keyup con un debounce la función, mientras que blur está conectado inmediata de validación. Aunque parece que keyup es provocada por lastpass, ya que he rebotada, hubo un retraso en la validación. Gracias a @pedro-ajtai he intentado añadir el change evento y de hecho las capturas último pase y deja las otras sutilezas solo.

    Coffeescript ejemplo:


    @fieldExp
    .keyup($.debounce(@_onExpChange, 3000))
    .blur(@_onExpChange)
    .change(@_onExpChange)

    Esto funcionó bien y lastpass relleno de forma desencadenantes inmediatos de validación.

  8. -3

    esta es la solución definitiva, garantiza el trabajo

    $(document).bind('mouseover', function(){
            liveValidate();
        });
    • también en el móvil?

Dejar respuesta

Please enter your comment!
Please enter your name here