campos obligatorios

Lizy94 · #1 (**permalink**) 06/01/2010, 18:53

Hola foro, tengo un problema al validar, quiero que cuando envie mi formulario en vez de presentar las ventanitas de campos obligatorios aparezca unos asteriscos en rojo al lado del campo de texto vacio, asi que lo que hice fue esto

Código PHP:

  <script language=JavaScript type=text/javascript>

function  valida()

{

var Nombre = document.getElementById("nombre").value;

var Apellidos = document.getElementById("apellidos").value;

  if(Nombre == null || Nombre.length == 0 || /^s+$/.test(Nombre))

    {document.getElementById("name").style.visibility='visible'; document.form1.name.focus();}    

  else    { document.getElementById("name").style.visibility='hidden'; }

   if(Apellidos == null || Apellidos.length == 0 || /^s+$/.test(Apellidos))

    {document.getElementById("apes").style.visibility='visible'; document.form1.apellidos.focus();}    

  else    { document.getElementById("apes").style.visibility='hidden'; }

 }

</script>

</head>

 
<body>

<form name="form1" method="post" action="" onSubmit="valida()">

  <p>nombre

    <input type="text" name="nombre" id="nombre"><span id="name" style="visibility:hidden;color:#ff0000;">**</span>

  </p>

  <p>apellidos

    <input type="text" name="apellidos" id="apellidos"><span id="apes" style="visibility:hidden;color:#ff0000;">**</span>

  </p>

  <p>

    <input type="submit" name="Submit" value="Enviar">

</p>

</form>

pero solamente me marcar los asteriscos para nombre y no para apellidos y solamente se muestran unos momentos, nose si alguien me pueda ayudar por favor

snahor · #2 (**permalink**) 07/01/2010, 01:40

Lizy,

El problema es que en la linea (la segunda del primer if)

Código:

document.form1.name.focus();

"name" es una palabra reservada que indica el atributo "name" del elemento en este caso de "form1" lo que retorma "form1" y el form no tiene el metodo "focus()". Supongo lo que quieres es el foco en el input, entonces cambia esa linea a:

Código:

document.form1.nombre.focus();

PS Para la proxima indenta el codigo para poder entenderlo mejor, y usa una funcion como

Código:

function $(e) { return document.getElementById(e); }

para evitar escribir

Código:

document.getElementById(...)

cada vez.

caricatos · #3 (**permalink**) 07/01/2010, 02:29

Hola:

Tu validación no cancela el submit, así que si bien detecta los problemas, el formulario de todas formas se envía...

Las validaciones deberían declararse así:
<form onsubmit="return valida(this)"...

Lo del "this" es para referenciar al formulario y conseguir un código reutilizable (al menos con pocos retoques)

El "return" debe recibir false para cancelarse, así que deberías llevar un valor lógico o al menos controlar eso...

Por ejemplo así:
return (validaNombre && validaApe);

Te paso un tuto: El abc de los formularios

Saludos