validacion - validar formulario javascript html5

jquery deshabilitar formulario enviar al entrar

Question

Tengo el siguiente javascript en mi página que no parece estar funcionando.

$(''form'').bind("keypress", function(e) {
  if (e.keyCode == 13) {               
    e.preventDefault();
    return false;
  }
});

Me gustaría desactivar el envío del formulario al ingresar, o mejor aún, para llamar a mi formulario ajax. Cualquiera de las soluciones es aceptable, pero el código que incluyo arriba no impide que se envíe el formulario.

Answer 1

Solución completa en JavaScript para todos los navegadores

El código anterior y la mayoría de las soluciones son perfectas. Sin embargo, creo que a la mayoría le gusta una "respuesta corta" que está incompleta.

Así que aquí está la respuesta completa. en JavaScript con soporte nativo para IE 7 también.

var form = document.getElementById("testForm");
form.addEventListener("submit",function(e){e.preventDefault(); return false;});

Esta solución ahora evitará que el usuario envíe usando la tecla Enter y no volverá a cargar la página, ni lo llevará a la parte superior de la página, si su formulario está en algún lugar a continuación.

Answer 2

3 años después y ni una sola persona ha respondido esta pregunta por completo.

El asker quiere cancelar el envío del formulario predeterminado y llamar a su propio Ajax. Esta es una solicitud simple con una solución simple. No hay necesidad de interceptar cada carácter ingresado en cada entrada.

Asumiendo que el formulario tiene un botón de enviar, ya sea un <button id="save-form"> o un <input id="save-form" type="submit"> , haz:

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});

Answer 3

Cuando el archivo finaliza (carga completa), el script detecta cada evento para la tecla "Ingreso" y desactiva el evento.

<script>
            $(document).ready(function () {
                $(window).keydown(function(event){
                    if(event.keyCode == 13) {
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    }
                });
            });
        </script>

Answer 4

El exceso de tener que capturar y probar cada tecla para la tecla ENTER realmente me molesta, por lo que mi solución se basa en el siguiente comportamiento del navegador:

Presionando ENTER activará un evento de clic en el botón de enviar (probado en IE11, Chrome 38, FF 31) ** (ref: http://mattsnider.com/how-forms-submit-when-pressing-enter/ )

Así que mi solución es eliminar el botón de envío estándar (es decir, <input type="submit"> ) para que el comportamiento anterior falle porque no hay un botón de envío para hacer clic mágico cuando se presiona ENTER. En su lugar, utilizo un manejador de clics de jQuery en un botón normal para enviar el formulario a través del método .submit() jQuery.

<form id="myform" method="post">
  <input name="fav_color" type="text">
  <input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>

<script>
 $(''#form-button-submit'').click(function(){
    $(''#myform'').submit();
  });
</script>

Demostración: http://codepen.io/anon/pen/fxeyv?editors=101

** este comportamiento no es aplicable si el formulario tiene solo 1 campo de entrada y ese campo es una entrada de ''texto''; en este caso, el formulario se enviará con la tecla ENTRAR incluso si no hay un botón de enviar en el marcado HTML (por ejemplo, un campo de búsqueda). Este ha sido el comportamiento estándar del navegador desde los años 90.

Answer 5

El siguiente código negará que la tecla Intro se use para enviar un formulario, pero aún le permitirá usar la tecla Intro en un área de texto. Puede editarlo aún más según sus necesidades.

<script type="text/javascript">
        function stopRKey(evt) {
          var evt = (evt) ? evt : ((event) ? event : null);
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
          if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) )  {return false;}
        }

        document.onkeypress = stopRKey;
</script> 

Answer 6

En Firefox, cuando ingrese y presione enter, enviará su forma superior. La solución está en el formulario de envío de respuestas añada esto:

<input type="submit" onclick="return false;" style="display:none" />

Answer 7

Incluso más corto:

$(''myform'').submit(function() {
  return false;
});

Answer 8

La mayoría de las respuestas anteriores evitarán que los usuarios agreguen nuevas líneas en un campo de área de texto. Si esto es algo que desea evitar, puede excluir este caso particular al verificar qué elemento tiene actualmente foco:

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is(''textarea'')) {
  e.preventDefault();
  return false;
}

Answer 9

No sé si ya resuelves este problema, o si alguien está tratando de resolverlo ahora mismo, ¡aquí está mi solución para esto!

$j('':input:not(textarea)'').keydown(function(event){
    var kc = event.witch || event.keyCode;
    if(kc == 13){
    event.preventDefault();
        $j(this).closest(''form'').attr(''data-oldaction'', function(){
            return $(this).attr(''action'');
        }).attr(''action'', ''javascript:;'');

        alert(''some_text_if_you_want'');

        $j(this).closest(''form'').attr(''action'', function(){
            return $(this).attr(''data-oldaction'');
        });
        return false;
    }
});

Answer 10

Por lo general, el formulario se envía en Ingresar cuando tiene foco en los elementos de entrada.

Podemos desactivar la tecla Enter (código 13 ) en los elementos de entrada dentro de un formulario:

$(''form input'').on(''keypress'', function(e) {
    return e.which !== 13;
});

DEMO: http://jsfiddle.net/bnx96/325/

Answer 11

Puedes hacer esto perfectamente en JavaScript puro, simple y no se requiere biblioteca. Aquí está mi respuesta detallada para un tema similar: Desactivar la tecla Intro para el formulario

En resumen, aquí está el código:

<script type="text/javascript">
window.addEventListener(''keydown'',function(e){if(e.keyIdentifier==''U+000A''||e.keyIdentifier==''Enter''||e.keyCode==13){if(e.target.nodeName==''INPUT''&&e.target.type==''text''){e.preventDefault();return false;}}},true);
</script>

Este código es para evitar que la tecla "Enter" ingrese type = ''text'' solamente. (Debido a que es posible que el visitante tenga que presionar enter para ingresar a la página) Si desea deshabilitar "Enter" para otras acciones también, puede agregar console.log (e); para sus propósitos de prueba, y presione F12 en cromo, vaya a la pestaña "consola" y presione "retroceso" en la página y mire adentro para ver qué valores se devuelven, luego puede orientar todos esos parámetros para mejorar aún más el código anterior para satisfacer sus necesidades de "e.target.nodeName" , "e.target.type" y muchos más ...

Answer 12

Qué tal esto:

$(":submit").closest("form").submit(function(){
    $('':submit'').attr(''disabled'', ''disabled'');
});

Esto debería deshabilitar todos los formularios con los botones de enviar en su aplicación.

Answer 13

Si keyCode no está capturado, capture which :

$(''#formid'').on(''keyup keypress'', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

EDITAR: se lo perdió, es mejor usar la keyup lugar de la keypress keyup

EDIT 2: Como en algunas versiones más nuevas de Firefox no se previene el envío del formulario, es más seguro agregar el evento de pulsación de tecla al formulario también. Además, no funciona (¿ya?) Simplemente vinculando el evento al formulario "nombre", pero solo a la identificación del formulario. Por lo tanto, lo hice más obvio al cambiar el ejemplo del código de forma adecuada.

EDIT 3: cambio de bind() a on()

Answer 14

si solo desea deshabilitar el envío al ingresar y enviar el botón también use el evento onsubmit del formulario

<form onsubmit="return false;">

Puede reemplazar "return false" con una llamada a la función JS que hará lo que sea necesario y también envíe el formulario como último paso.

Answer 15

$(''form'').keyup(function(e) {
  return e.which !== 13  
});

El evento.que la propiedad normaliza event.keyCode y event.charCode. Se recomienda mirar event.which para ingresar la clave del teclado.

which documenta

Answer 16

$(document).on(''keyup keypress'', ''form input[type="text"]'', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;
  }
});

Esta solución funciona en todos los formularios en el sitio web (también en formularios insertados con ajax), impidiendo únicamente la entrada de textos de entrada. Colóquelo en una función lista para documentos y olvide este problema por una vida.