Tengo un validador de formulario simple. Cuando hace clic fuera de la entrada, muestra un mensaje de error (cuando es necesario).
Sin embargo, he notado un efecto secundario. Cuando el mensaje de error se inserta en el formulario, desplaza el botón de envío hacia abajo, lo que evita que se active el evento de envío.
Eche un vistazo al fragmento a continuación. Este ejemplo demasiado simplificado emula el problema. Intente hacer clic en la entrada y luego en el botón. Notará que el evento de clic del botón no se activará porque está desplazado hacia abajo.
function insert() { var button = document.querySelector('button'); document.body.insertBefore(document.createElement('div'), button); } div { width: 100px; height: 100px; background-color: red; } <input onblur="insert()" /> <button onclick="alert()">Click</button>¿Como puedo resolver este problema? Tenga en cuenta que para mi validador de formulario, el botón es de tipo enviar y el evento que no se activará es el evento de envío del formulario, pero el mismo concepto se puede aplicar claramente aquí.
La razón por la que la alert() no se activa es porque el elemento div creado se inserta con el evento de blur antes de que ocurra el evento de click . Luego, cuando ocurre el evento de click , no se registra con el botón porque el botón se mueve en la página. En el siguiente ejemplo, agregué una función delayInsert para demostrar esto.
Pasos:
Click en el botón Hacer clic La alert() se activará antes de que se inserte el div .
function delayInsert() { setTimeout(insert, 1000); } function insert() { var button = document.querySelector('button'); document.body.insertBefore(document.createElement('div'), button); } div { width: 100px; height: 100px; background-color: red; } <input onblur="delayInsert()" /> <button onclick="alert()">Click</button>Esto funciona para mi. Cuando edito el cuadro de texto, se agrega el div. Cuando hago clic en el botón, alerta. ¿Intenta usar js para obtener los datos y enviar un xmlHTTPrequest al php?