validar usuario para nombre formularios formulario enviar crear contraseña codigos antes javascript html cross-browser standards

usuario - validar nombre javascript



¿Cómo se determina el botón de envío predeterminado en un formulario HTML? (14)

Andrezj casi lo tiene claro ... pero aquí hay una solución fácil de navegador.

Tome una forma como esta:

<form> <input/> <button type="submit" value="some non-default action"/> <button type="submit" value="another non-default action"/> <button type="submit" value="yet another non-default action"/> <button type="submit" value="default action"/> </form>

y refactor a esto:

<form> <input/> <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/> <button type="submit" value="some non-default action"/> <button type="submit" value="another non-default action"/> <button type="submit" value="yet another non-default action"/> <button type="submit" value="still another non-default action"/> <button type="submit" value="default action"/> </form>

Dado que la especificación W3C indica que los botones múltiples de envío son válidos, pero omite la orientación sobre cómo debe manejarlos el agente de usuario, los fabricantes de exploradores deben implementarlo como lo consideren oportuno. Descubrí que enviarán el primer botón de envío en el formulario o que envíen el siguiente botón de envío después del campo de formulario que actualmente tiene el foco.

Desafortunadamente, simplemente agregando un estilo de visualización: ninguno; no funcionará porque la especificación W3C indica que cualquier elemento oculto debe excluirse de las interacciones del usuario. ¡Así que ocúltalo a la vista de todos!

Arriba, es un ejemplo de la solución que terminé poniendo en producción. Al presionar la tecla Intro, se activa el envío de formularios predeterminado, tal como se esperaba, incluso cuando otros valores no predeterminados están presentes y preceden al botón de envío predeterminado en el DOM. Bonificación para la interacción mouse / teclado con entradas explícitas del usuario, evitando los manejadores de javascript.

Nota: tabular a través del formulario no mostrará el foco para ningún elemento visual, sin embargo, seguirá causando que se seleccione el botón invisible. Para evitar este problema, simplemente configure los atributos de tabindex en consecuencia y omita un atributo de tabindex en el botón de envío invisible. Si bien puede parecer fuera de lugar promover estos estilos como importantes, deben evitar que cualquier marco o estilo de botón existente interfiera con esta solución. Además, esos estilos en línea son definitivamente de mala calidad, pero estamos probando conceptos aquí ... no escribiendo código de producción.

Si se envía un formulario pero no mediante un botón específico, como

  • presionando Enter
  • utilizando HTMLFormElement.submit() en JS

¿Cómo se supone que un navegador determina cuál de los múltiples botones de envío, si corresponde, usar como uno presionado?

Esto es significativo en dos niveles:

  • llamar a un controlador de eventos onclick adjunto a un botón de envío
  • los datos enviados de vuelta al servidor web

Mis experimentos hasta ahora han demostrado que:

  • al presionar Enter , Firefox, Opera y Safari use el primer botón de enviar en el formulario
  • al presionar Enter , IE usa el primer botón de enviar o ninguno en absoluto, dependiendo de las condiciones que no he podido descifrar
  • todos estos navegadores no usan ninguno en absoluto para un envío de JS

¿Qué dice el estándar?

Si fuera útil, aquí está mi código de prueba (el PHP es relevante solo para mi método de prueba, no para mi pregunta en sí)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> </head> <body> <h1>Get</h1> <dl> <?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?> </dl> <h1>Post</h1> <dl> <?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?> </dl> <form name="theForm" method="<?php echo isset($_GET[''method'']) ? $_GET[''method''] : ''get''; ?>" action="<?php echo $_SERVER[''SCRIPT_NAME'']; ?>"> <input type="text" name="method" /> <input type="submit" name="action" value="Button 1" onclick="alert(''Button 1''); return true" /> <input type="text" name="stuff" /> <input type="submit" name="action" value="Button 2" onclick="alert(''Button 2''); return true" /> <input type="button" value="submit" onclick="document.theForm.submit();" /> </form> </body></html>

Creo que esta publicación ayudaría si alguien quiere hacerlo con jQuery:

http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/

La solución básica es:

$(function() { $("form input").keypress(function (e) { if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { $(''input[type=submit].default'').click(); return false; } else { return true; } }); });

y otro que me gustó fue:

jQuery(document).ready(function() { $("form input, form select").live(''keypress'', function (e) { if ($(this).parents(''form'').find(''button[type=submit].default, input[type=submit].default'').length <= 0) return true; if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { $(this).parents(''form'').find(''button[type=submit].default, input[type=submit].default'').click(); return false; } else { return true; } }); });

Cuando tiene varios botones de envío en un solo formulario y un usuario presiona la tecla ENTRAR para enviar el formulario desde un campo de texto, este código anula la funcionalidad predeterminada, llamando al evento de envío en el formulario del evento de pulsación de tecla. Aquí está ese código:

$(''form input'').keypress(function(e){ if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)){ $(e.target).closest(''form'').submit(); return false; } else return true; });

De la especificación de HTML 4 :

Si un formulario contiene más de un botón de envío, solo el botón de envío activado tiene éxito.

Esto significa que dado que hay más de 1 botón de enviar y ninguno activado (clickeado), ninguno debe ser exitoso.

Y yo diría que esto tiene sentido: imagine una gran forma con múltiples botones de envío. En la parte superior, hay un botón "eliminar este registro", seguido de muchas entradas y en la parte inferior hay un botón "actualizar este registro". Un usuario presionando enter mientras está en un campo en la parte inferior del formulario nunca sospecharía que implícitamente golpea el "eliminar este registro" desde la parte superior.

Por lo tanto, creo que no es una buena idea usar el primero o cualquier otro botón que el usuario no defina (haga clic) en uno. Sin embargo, los navegadores lo están haciendo, por supuesto.

De tus comentarios:

Una consecuencia es que, si tiene varios formularios que envían al mismo script, no puede confiar en los botones de envío para distinguirlos.

<input type="hidden" value="form_name" /> caer un <input type="hidden" value="form_name" /> en cada formulario.

Si lo envía con javascript: agregue enviar eventos a formularios, no haga clic en eventos en sus botones. Los usuarios de Saavy no tocan el mouse muy a menudo.

Es extraño que el primer botón Enter vaya siempre al primer botón independientemente de que sea visible o no, por ejemplo, usando jquery show/hide() . Agregar atributo .attr(''disabled'', ''disabled'') impide recibir completamente el botón Enter submit. Es un problema, por ejemplo, al ajustar la visibilidad del botón Insertar / Editar + Eliminar en los cuadros de diálogo de registro. Encontré menos hackish y simple colocando Editar en frente de Insertar

<button type="submit" name="action" value="update">Update</button> <button type="submit" name="action" value="insert">Insert</button> <button type="submit" name="action" value="delete">Delete</button>

y usa el código javascript:

$("#formId button[type=''submit''][name=''action''][value!=''insert'']").hide().attr(''disabled'', ''disabled''); $("#formId button[type=''submit''][name=''action''][value=''insert'']").show().removeAttr(''disabled'');

Esto ahora se puede resolver usando flexbox :

HTML

<form> <h1>My Form</h1> <label for="text">Input:</label> <input type="text" name="text" id="text"/> <!-- Put the elements in reverse order --> <div class="form-actions"> <button>Ok</button> <!-- our default action is first --> <button>Cancel</button> </div> </form>

CSS

.form-actions { display: flex; flex-direction: row-reverse; /* reverse the elements inside */ }

Explicación
Usando flex box, podemos invertir el orden de los elementos en un contenedor que usa display: flex usando también la regla CSS: flex-direction: row-reverse . Esto no requiere CSS o elementos ocultos. Para los navegadores más antiguos que no son compatibles con flexbox, todavía obtienen una solución viable, pero los elementos no se revertirán.

Manifestación
http://codepen.io/Godwin/pen/rLVKjm

HTML 4 no lo hace explícito. El borrador de trabajo actual de HTML5 especifica que el primer botón de envío debe ser el predeterminado :

El botón predeterminado de un elemento de form es el primer botón de envío en orden de árbol cuyo propietario de formulario es ese elemento de form .

Si el agente de usuario admite permitir que el usuario envíe un formulario implícitamente (por ejemplo, en algunas plataformas presionando la tecla "enter" mientras un campo de texto está enfocado, envía implícitamente el formulario), y luego lo hace para un formulario cuyo botón predeterminado tiene una activación definida el comportamiento debe hacer que el agente de usuario ejecute pasos sintéticos de activación de clics en ese botón predeterminado .

Luché con la misma pregunta ya que tenía el botón de enviar en el medio del que redirigió el envío a otra página, así:

<button type="submit" onclick="this.form.action = ''#another_page''">More</button>

Cuando el usuario presiona la tecla Intro, se hizo clic en este botón en lugar de en otro botón de enviar.

Así que hice algunas pruebas primitivas al crear un desde con múltiples botones de envío y diferentes opciones de visibilidad y alertas de evento onclick en qué botón se hizo clic: https://jsfiddle.net/aqfy51om/1/

Navegadores y sistemas operativos que utilicé para probar:

WINDOWS

  • Google Chrome 43 (c''mon google: D)
  • Mozilla Firefox 38
  • Internet Explorer 11
  • Opera 30.0

OSX

  • Google Chrome 43
  • Safari 7.1.6

La mayoría de estos navegadores hicieron clic en el primer botón a pesar de las opciones de visibilidad aplicadas, excepto IE y Safari, que hicieron clic en el tercer botón, que es "visible" dentro del contenedor "oculto":

<div style="width: 0; height: 0; overflow: hidden;"> <button type="submit" class="btn btn-default" onclick="alert(''Hidden submit button #3 was clicked'');">Hidden submit button #3</button> </div>

Entonces mi sugerencia, que voy a usar, es:

Si el formulario tiene varios botones de envío con un significado diferente, entonces incluya el botón de enviar con acción predeterminada al comienzo del formulario que sea:

  1. Totalmente visible
  2. Envuelto en un contenedor con style="width: 0; height: 0; overflow: hidden;"

EDITAR Otra opción podría ser desplazar el botón (todavía al comienzo de desde) style="position: absolute; left: -9999px; top: -9999px;" , lo intenté en IE, funcionó, pero no tengo idea de qué más puede estropear, por ejemplo, impresión ...

Otra solución que he usado es solo tener un botón en el formulario y falsificar los otros botones.

Aquí hay un ejemplo:

<form> <label for="amount">Amount of items</label> <input id="amount" type="text" name="amount" /> <span id="checkStock" class="buttonish">Check stock</span> <button type="submit" name="action" value="order">Place order</button> </form>

Luego diseño los elementos del tramo para que se vean como un botón. Un oyente JS observa el tramo y realiza la operación deseada una vez que hace clic.

No necesariamente es correcto para todas las situaciones, pero al menos es bastante fácil de hacer.

Si envía el formulario a través de Javascript (es decir, formElement.submit() o cualquier otro equivalente), ninguno de los botones de envío se considera correcto y ninguno de sus valores se incluye en los datos enviados. (Tenga en cuenta que si envía el formulario mediante submitElement.click() entonces el envío al que tenía referencia se considera activo, esto no corresponde realmente a su pregunta, ya que aquí el botón de enviar no es ambiguo, pero pensé Lo incluiría para las personas que lean la primera parte y se pregunten cómo hacer que un botón de envío sea exitoso a través del envío de formularios de JS. Por supuesto, los manejadores de envío de formularios seguirán disparando de esta manera, mientras que no lo harían a través de form.submit() eso es otro caldero de pescado ...)

Si el formulario se envía al presionar Enter mientras está en un campo que no sea textarea, en realidad depende del agente del usuario decidir qué quiere aquí. Las specs no dicen nada acerca de enviar un formulario usando la tecla enter mientras se encuentra en un campo de entrada de texto (si tabula un botón y lo activa usando espacio o lo que sea, no hay problema ya que ese botón específico de envío se usa sin ambigüedades). Todo lo que dice es que se debe enviar un formulario cuando se activa un botón de envío, ni siquiera es un requisito que presionar enter, por ejemplo, un ingreso de texto enviará el formulario.

Creo que Internet Explorer elige el botón de enviar que aparece primero en la fuente; Tengo la sensación de que Firefox y Opera eligen el botón con el tabindex más bajo, volviendo al primero definido si no se define nada más. También hay algunas complicaciones con respecto a si los envíos tienen un atributo de valor no predeterminado IIRC.

Lo importante es que no existe un estándar definido para lo que sucede aquí y depende totalmente del capricho del navegador; por lo tanto, en la medida de lo posible en lo que sea que esté haciendo, trate de evitar confiar en un comportamiento en particular. Si realmente debe saberlo, probablemente pueda averiguar el comportamiento de las distintas versiones del navegador, pero cuando investigué esto hace un tiempo hubo algunas condiciones bastante intrincadas (que, por supuesto, están sujetas a cambios con las nuevas versiones del navegador) y aconsejaría ¡para evitarlo si es posible!

Tenía un formulario con 11 botones de envío y siempre usaba el primer botón de enviar cuando el usuario presionaba enter. Leí en otra parte que no es una buena idea (mala práctica) tener más de un botón de enviar en un formulario, y la mejor manera de hacerlo es tener el botón que desea de manera predeterminada, como el único botón de enviar en el formulario. Los otros botones se deben convertir en "TYPE = BUTTON" y se debe agregar un evento onClick que invoque su propia rutina de envío en Javascript. Algo como esto :-

<SCRIPT Language="JavaScript"> function validform() { // do whatever you need to validate the form, and return true or false accordingly } function mjsubmit() { if (validform()) { document.form1.submit(); return true;} return false; } </SCRIPT> <INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue=''button1''; return mjsubmit();"> <INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue=''button2''; return mjsubmit();"> <INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue=''button3''; return validform();"> <INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue=''button4''; return mjsubmit();">

Aquí, el botón 3 es el predeterminado, y aunque está enviando el formulario por programación con los otros botones, la rutina mjsubmit los valida. HTH.

mi receta:

<form> <input type=hidden name=action value=login><!-- the magic! --> <input type=text name=email> <input type=text name=password> <input type=submit name=action value=login> <input type=submit name=action value="forgot password"> </form>

Enviará el campo oculto predeterminado si ninguno de los botones está ''hecho clic''.

si se hace clic en ellos, tienen preferencia y se pasa su valor.

EDITAR: Lo siento, al escribir esta respuesta, estaba pensando en enviar botones en el sentido general. La respuesta a continuación no se trata de múltiples type="submit" botones type="submit" , ya que solo deja un type="submit" y cambia el otro a type="button" . Dejo la respuesta aquí como referencia en caso de que ayude a alguien que puede cambiar el type en su forma:

Para determinar qué botón se presiona al presionar enter, puede marcarlo con type="submit" , y los otros botones marcarlos con type="button" . Por ejemplo:

<input type="button" value="Cancel" /> <input type="submit" value="Submit" />