javascript - off - serialize form jquery ajax post

Detectando autocompletar en la entrada de formulario con jQuery

Question

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

¿Hay alguna manera de detectar si alguna de las entradas ha cambiado independientemente de cómo se haya cambiado, utilizando jQuery?

Answer 1

El evento de cambio de jQuery solo disparará en desenfoque. El evento de teclado se disparará a medida que escribe. Tampoco se dispara al hacer clic en una opción de finalización automática. También estoy buscando una forma de detectar esto, pero actualmente estoy yendo con

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

Pero no resuelve el problema ...

Answer 2

La respuesta ha sido dada en this pregunta. No utiliza jQuery, pero funciona para Autocompletar:

Utilice el evento js onpropertychange .

Answer 3

Mi problema fue detectar el autocompletar (mediante un complemento como lastpass o 1password), así como el problema descrito anteriormente.

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();
});

Vea la demostración en JSFiddle .

Answer 4

Podría intentar usar la on input para detectar cambios basados ​​en texto (excepto claves como ctrl y shift ) en <input> ''s.

Por ejemplo:

$(input).on(''input'', function() { 
    console.log($(this).val()); 
});

Answer 5

Puede usar la función jQuery .change() .

Después de que la página se cargue inicialmente, puede validar el formulario completo, solo para verificar que de hecho no está lleno. Después de eso, puede usar .change() para verificar si las cosas han cambiado en el formulario, y si algo ha cambiado, valide el formulario nuevamente

$(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 hacer clic siempre en el botón de enviar, pero use .submit() para vincularlo al validador de formulario. Luego, si el formulario ES válido, continúe. Si el formulario NO ES válido use .preventDefault() para detener el envío del formulario ..... y también mostraría un mensaje de advertencia, indicando los campos faltantes.

Answer 6

Quería una experiencia de usuario muy buena en un campo en el que no sería inválida (se pondría roja en mi caso) siempre y cuando el usuario estuviera razonablemente activo, por ejemplo, completando el campo.

Para hacer esto para la entrada normal, pude conectarme a la keyup con una función debounce , mientras que el blur está conectado para la validación inmediata. Si bien parece que la keyup activa la tecla, como la eliminé, se produjo un retraso en la validación. Gracias a @ peter-ajtai traté de agregar el evento de change y de hecho atrapa el último pase y deja en paz a los demás.

Ejemplo de Coffeescript:

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

Esto funcionó bien y el relleno de formulario activa la validación inmediata.

Answer 7

Tengo una solución decente después de tener el mismo problema. Establezca keyup de forma normal en nuestros campos de formulario, luego pase el mouse sobre el div circundante. Entonces, una vez que haga clic en la opción de autocompletar, su mouse estará sobre la parte superior del div:

$("#emailaddress").bind("keyup", function() {
    displayFullSubcribeForm();
});

$(".center_left_box").bind("mouseover", function() {
    displayFullSubcribeForm();
});

Answer 8

Yo mismo usé

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

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

Answer 9

esta es la solución definitiva, garantizada para trabajar

$(document).bind(''mouseover'', function(){
        liveValidate();
    });