Validacion inner HTML

jonnyalexbh · #1 (**permalink**) 29/03/2012, 12:01

Buenas tardes

Tengo el siguiente código lo que deseo hacer y no me funciona es :

Al momento de yo dar clic al botón me muestre todos los errores que tengo en el formulario, en este momento me muestra uno a uno

Los errores que me los muestre al lado de cada campo

Como lo hago

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function Validar(f)
{
	var error = true;
	
	if (f.txt_nombre.value== 0 || f.txt_nombre.value == null || /^\s+$/.test(f.txt_nombre.value))
    {
	  document.getElementById('error_nombre').innerHTML='<font color=#FF0000> ! Campo requerido <font>';
	  f.txt_nombre.focus(); 
      return false
    }
	else
	{
		document.getElementById('error_nombre').innerHTML=' ';
	}
	
	if (f.txt_apellido.value== 0 || f.txt_apellido.value == null || /^\s+$/.test(f.txt_apellido.value))
    {
	  document.getElementById('error_apellido').innerHTML='<font color=#FF0000> ! Campo requerido <font>';
      f.txt_apellido.focus(); 
      return false
    }
	else
	{
		document.getElementById('error_nombre').innerHTML=' ';
	}
	
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="456" border="1" align="center">
    <tr>
      <td>Nombre</td>
      <td>
      <input type="text" name="txt_nombre" id="txt_nombre" />
      <span id="error_nombre"></span>
      </td>
    </tr>
    <tr>
      <td>Apellido</td>
      <td><label for="txt_apellido"></label>
      <input type="text" name="txt_apellido" id="txt_apellido" />
       <span id="error_apellido"></span>
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" name="button" id="button" value="Validar" onclick="return Validar(form1)"/></td>
    </tr>
  </table>
</form>
</body>
</html>

argenisfd · #2 (**permalink**) 02/04/2012, 08:48

Hola, problema que tienes es que estas haciendo "return false" en cada validación, haciendo que el código que sigue sencillamente no se ejecute. lo que debes hacer es que en vez de hacer el 'return false" almacenes en una variable el valor y al final que se ejecuten todas las validaciones retornes el valor

Código Javascript:

Ver originalfunction validar(){
  var isValid=true; //por defecto el formulario es valido
  if(/*validación 1*/){
     isValid=false;
 }
 
  if(/*validación 2*/){
    isValid=false;
  }
 
 if(/*validación 2*/){
    isValid=false;
  }
 
 
  return isValid;
}

Argenis Fontalvo (http://argenisfontalvo.brandyourself.com/)