javascript - validacion - Práctica recomendada: ¿acceder a los elementos del formulario mediante la identificación HTML o el atributo de nombre?

validar formulario javascript html5

Question

Como sabe cualquier desarrollador experimentado de JavaScript, hay muchas (demasiadas) formas de hacer lo mismo. Por ejemplo, supongamos que tiene un campo de texto de la siguiente manera:

<form name="myForm">  
    <input type="text" name="foo" id="foo" />

Hay muchas formas de acceder a esto en JavaScript:

[1]  document.forms[0].elements[0];
[2]  document.myForm.foo;
[3]  document.getElementById(''foo'');
[4]  document.getElementById(''myForm'').foo;
     ... and so on ...

Los métodos [1] y [3] están bien documentados en la documentación de Mozilla Gecko, pero ninguno de ellos es ideal. [1] es demasiado general para ser útil y [3] requiere tanto una identificación como un nombre (suponiendo que publicará los datos en un idioma del lado del servidor). Idealmente, sería mejor tener solo un atributo id o un atributo name (tener ambos es algo redundante, especialmente si el id no es necesario para cualquier css, y aumenta la probabilidad de errores ortográficos, etc.).

[2] parece ser el más intuitivo y parece ser ampliamente utilizado, pero no lo he visto referenciado en la documentación de Gecko y me preocupan tanto la compatibilidad con versiones anteriores como la compatibilidad con navegadores cruzados (y, por supuesto, quiero ser cumpliendo con los estándares como sea posible).

Entonces, ¿qué es mejor práctica aquí? ¿Alguien puede señalar algo en la documentación DOM o la especificación W3C que podría resolver esto?

Tenga en cuenta que estoy específicamente interesado en una solución que no sea de biblioteca (jQuery / Prototype).

Answer 1

[1] document.forms [0] .elements [0];

"¡ No-omg-never! " Viene a la mente cuando veo este método de acceso a los elementos. El problema con esto es que asume que el DOM es una estructura de datos normal (por ejemplo, una matriz) en la que el orden de los elementos es estático, consistente o confiable de todos modos. Sabemos que 99.9999% del tiempo, que este no es el caso. Reordenando o input elementos dentro del formulario, agregando otro form a la página antes del formulario en cuestión, o moviendo el formulario en cuestión son todos los casos donde este código se rompe. Cuento: esto es muy frágil. Tan pronto como agregue o mueva algo, se romperá.

[2] document.myForm.foo;

Estoy con Sergey ILinsky en esto:

• Acceda a elementos arbitrarios haciendo referencia a su atributo id : document.getElementById("myform");
• Acceda a los elementos de formulario con nombre por nombre, en relación con su elemento de formulario primario: document.getElementById("myform").foo;

Mi problema principal con este método es que el atributo de name es inútil cuando se aplica a un formulario. El nombre no se pasa al servidor como parte de POST / GET y no funciona para los marcadores de estilo hash.

[3] document.getElementById (''foo'');

En mi opinión, este es el método más preferible. El acceso directo es el método más conciso y claro.

[4] document.getElementById (''myForm''). Foo;

En mi opinión, esto es aceptable, pero más detallado de lo necesario. Método # 3 es preferible.

Acabo de ver un video de Douglas Crockford y él intervino en este mismo tema. El punto de interés es a las -12: 00. Para resumir:

• Las colecciones de documentos (document.anchor, document.form, etc.) son obsoletas e irrelevantes (método 1).
• El atributo de name se usa para nombrar cosas, no para acceder a ellas. Es para nombrar elementos como ventanas, campos de entrada y etiquetas de anclaje.
• "Identificación es lo que debe usar para identificar un elemento de forma única para que pueda obtener acceso. Ellos (nombre e ID) solían ser intercambiables, pero ya no lo son".

Entonces ahí lo tienes. Semánticamente, esto tiene más sentido.

Answer 2

Echa un vistazo a esta página: https://developer.mozilla.org/En/DOM/Document.getElementsByName

document.getElementsByName(''foo'')[0]; // returns you element.

Tiene que ser ''elementos'' y debe devolver una matriz porque más de un elemento podría tener el mismo nombre.

Answer 3

Esto es un poco antiguo, pero quiero agregar algo que considero relevante.
(Quise comentar uno o dos hilos arriba, pero parece que necesito reputación 50 y solo tengo 21 en el momento en que escribo esto :))
Solo quiero decir que hay momentos en que es mucho mejor acceder a los elementos de un formulario por nombre en lugar de por id. No estoy hablando de la forma en sí misma. El formulario, OK, puede darle una identificación y luego acceder a ella. Pero si tiene un botón de opción en un formulario, es mucho más fácil usarlo como un solo objeto (obtener y establecer su valor) y solo puede hacerlo por su nombre, hasta donde yo sé.

Ejemplo:

<form id="mainForm" name="mainForm">
    <input type="radio" name="R1" value="V1">choice 1<br/>
    <input type="radio" name="R1" value="V2">choice 2<br/>
    <input type="radio" name="R1" value="V3">choice 3
</form>

Puede obtener / establecer el valor verificado del botón de radio R1 como un todo mediante el uso de
document.mainForm.R1.value
o
document.getElementById ("mainForm"). R1.value
Por lo tanto, si desea tener un estilo unitario, es posible que desee utilizar siempre este método, independientemente del tipo de elemento de formulario. Yo, me siento perfectamente cómodo accediendo a botones de opción por nombre y cuadros de texto por identificación.

Answer 4

La Forma 2 está bien, y la Forma 3 también es recomendada.
La redundancia entre nombre e id es causada por la necesidad de mantener la compatibilidad, en html 5 algunos elementos (como img, form, iframe y tal) perderán su atributo de "nombre", y se recomienda usar solo su id para hacer referencia a ellos a partir de ahora en :)

Answer 5

Mi respuesta diferirá en la pregunta exacta. Si quiero acceder específicamente a cierto elemento, entonces usaré document.getElementById (). Un ejemplo es calcular el nombre completo de una persona, porque se basa en múltiples campos, pero es una fórmula repetible.

Si deseo acceder al elemento como parte de una estructura funcional (un formulario), entonces usaré:

var frm = document.getElementById(''frm_name'');
for(var i = 0; i < frm.elements.length;i++){
   ..frm.elements[i]..

Así es como funciona también desde la perspectiva del negocio. Los cambios dentro del ciclo van junto con los cambios funcionales en la aplicación y por lo tanto son significativos. Lo aplico principalmente para una validación fácil de usar y para evitar llamadas de red para verificar datos incorrectos. Repito el lado del servidor de validación (y le agrego un poco más), pero si puedo ayudar al lado del cliente del usuario, entonces es beneficioso para todos.

Para la agregación de datos (como la construcción de un gráfico circular basado en los datos del formulario) utilizo documentos de configuración y objetos Javascript hechos a medida. Entonces, ¿el significado exacto del campo es importante en relación con su contexto y uso el documento document.getElementById ()?

Answer 6

Para acceder a los elementos nombrados colocados en un formulario, es una buena práctica usar el objeto de form sí.

Para acceder a un elemento arbitrario en el árbol DOM que en ocasiones se puede encontrar dentro de un formulario, use getElementById y el id del elemento.

Answer 7

Para complementar las otras respuestas, document.myForm.foo es el llamado DOM nivel 0, que es el camino implementado por Netscape y por lo tanto no es realmente un estándar abierto a pesar de que es compatible con la mayoría de los navegadores.

Answer 8

Realmente no está respondiendo tu pregunta, pero solo en esta parte:

[3] requiere tanto una identificación como un nombre ... tener ambos es algo redundante

Lo más probable es que necesite tener un atributo id en cada campo de formulario de todos modos, para que pueda asociar su elemento <label> con este, así:

<label for="foo">Foo:</label>
<input type="text" name="foo" id="foo" />

Esto es necesario para la accesibilidad (es decir, si no asocia etiquetas y controles de formularios, ¿por qué odia tanto a las personas ciegas?).

Es algo redundante, aunque menos cuando tiene casillas de verificación / botones de opción, donde varios de ellos pueden compartir un name . En última instancia, la id y el name son para diferentes propósitos, incluso si ambos se establecen con el mismo valor.

Answer 9

Siendo anticuado, siempre he usado la sintaxis ''document.myform.myvar'', pero recientemente encontré que falló en Chrome (OK en Firefox e IE). Era una página Ajax (es decir, cargada en la propiedad innerHTML de un div). Quizás Chrome no reconoció el formulario como un elemento del documento principal. Usé getElementById (sin hacer referencia al formulario) en su lugar y funcionó bien.

Answer 10

Solo déle a su formulario una identificación y solo ingrese un nombre :

<form id="myform">
  <input type="text" name="foo">

Entonces, la forma más accesible y menos problemática de acceder a su elemento de entrada es a través de:

document.getElementById("myform").elements["foo"]

usar .elements["foo"] lugar de solo .foo es preferible porque este último puede devolver una propiedad de la forma denominada "foo" en lugar de un elemento HTML.

Answer 11

Yo prefiero un quinto método. Es decir
[5] Use el identificador de JavaScript especial para pasar el formulario o el objeto de campo a la función desde el controlador de eventos.

Específicamente, para formularios:

<form id="form1" name="form1" onsubmit="return validateForm(this)">

y

// The form validation function takes the form object as the input parameter
function validateForm(thisForm) {
  if (thisform.fullname.value !=...

Usando esta técnica, la función nunca tiene que saber
- el orden en que se definen los formularios en la página,
- el ID de forma, ni
- el nombre del formulario

Del mismo modo, para los campos:

<input type="text" name="maxWeight">
...
<input type="text" name="item1Weight" onchange="return checkWeight(this)">
<input type="text" name="item2Weight" onchange="return checkWeight(this)">

y

function checkWeight(theField) {
  if (theField.value > theField.form.maxWeight.value) {
    alert ("The weight value " + theField.value + " is larger than the limit");
    return false;
  }
return true;
}

En este caso, la función nunca tiene que conocer el nombre o la identificación de un campo de peso en particular, aunque sí necesita saber el nombre del campo de límite de peso.