[SOLUCIONADO] Duda formulario HTML y javascript

MigueCadiz · #1 (**permalink**) 11/03/2013, 16:48

Para validar un FORM he creado esta función a la que le paso como parámetro el objeto this

Código:

<script type="text/javascript">

function validarForm(formulario) {
  if(formulario.nombre.value.length==0) { //comprueba que no esté vacío
    formulario.nombre.focus();   
     alert('Escribe tu nombre');
    return false; //devolvemos el foco
  }
}
</script>

Lo que me gustaría es no tener que pasar el this y capturar el formulario antes de la función. He intentado esto poniendole un id al FORM:

Código:

<script type="text/javascript">
var frm=document.getElementById("formula");

function validarForm() {
  if(frm.nombre.value.length==0) { //comprueba que no esté vacío
    frm.nombre.focus();   
     alert('Escribe tu nombre');
    return false; //devolvemos el foco
  }
}
</script>

Y esto también intentando capturarlo por el nombre:

Código:

<script type="text/javascript">
var frm=document.nombreFormulario;

function validarForm() {
  if(frm.nombre.value.length==0) { //comprueba que no esté vacío
    frm.nombre.focus();   
     alert('Escribe tu nombre');
    return false; //devolvemos el foco
  }
}
</script>

Por favor una ayudita.

emprear · #2 (**permalink**) 11/03/2013, 17:33

Pero el problema cual es

Código HTML:

Ver original<script type="text/javascript">
//<![CDATA[
function valida(){
var f = document.getElementById('xa');
alert(f.nombre.value);
return false;
}
 
function valida2(frm){
alert(frm.nombre.value);
return false;
}
//]]>
</script>
 
<form id="xa">
<input type="text" name="nombre">
<input type="button" onclick="return valida()" value="val" />
</form>
 
<form onsubmit ="return valida2(this)";>
<input type="text" name="nombre">
<input type="submit" onclick=" value="val" />
</form>

incluso podrías poner simplemente un id al campo de texto y validar contra ese elemento

Saludos

MigueCadiz · #3 (**permalink**) 12/03/2013, 13:17

Muchisimas gracias.

La solución era simple. No podía declara la variable que captura al FORM fuera de la función como global.

Código:

<script type="text/javascript">
var frm=document.getElementById("formula");

function validarForm() {
  
  if(frm.nombre.value.length==0) { //comprueba que no esté vacío
    frm.nombre.focus();   
     alert('Escribe tu nombre');
    return false; //devolvemos el foco
  }
}
</script>

Tenía que declararla dentro de la función como local, así:

Código:

<script type="text/javascript">

function validarForm() {
var frm=document.getElementById("formula");
  if(frm.nombre.value.length==0) { //comprueba que no esté vacío
    frm.nombre.focus();   
     alert('Escribe tu nombre');
    return false; //devolvemos el foco
  }
}
</script>

Incluso se puede capturar el formulario por su nombre a traves del objeto document sin tener que usar un atributo id:

Código:

<script type="text/javascript">

function validarForm() {
  var frm=document.nombreForm
  if(frm.nombre.value.length==0) { //comprueba que no esté vacío
    frm.nombre.focus();   
     alert('Escribe tu nombre');
    return false; //devolvemos el foco
  }
}
</script>

emprear · #4 (**permalink**) 12/03/2013, 13:40

Todavía no entiendo la gracia del ejemplo,

podés acceder al form por su id
por su name
por su etiqueta y el indice en el caso de que hubiera varios forms, lo mismo para los elementos del form

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<script>
function fnc(){
alert(document.forms[0].nombre.value);
alert(document.forms[0].elements[0].value);
alert(document.forms[1].nombre.value);
alert(document.forms[1].elements[0].value);
alert(document.forms[1].elements[1].value);
}
</script>
</head>
<body>
<form>
<input type="text" name="nombre">
</form>
<p>form 2</p>
<form>
<input type="text" name="nombre"><br>
<input type="text" name="apellido">
</form>
<button onclick="fnc();">valores de los form 1 y 2</button>
</body>
</html>