Validar formulario dependiendo selección del usuario

De_la_Cuesta_13 · #1 (**permalink**) 15/06/2009, 16:25

Cordial Saludo,

Compañeros estoy desarrollando un formulario que incluye ciertos campos como: Nombre, Apellido, DNI, etc. He desarrollado una aplicación para incluir la fotografía de cada persona.
De ahí mi pregunta, se como validar campos de un formulario (número, letras, etc), pero como lo de la fotografía es opcional, pienso que, con un mostrar/ocultar que al ser activado me muestre el <input type=file> para subir la foto, por ende se valida ese campo (además de los otros que componen el formulario); de lo contrario (estando desactivado lo de subir el archivo) solo valide los otros campos.

Agradezco su colaboración.

PD: Se que con JS se hace (bueno eso creo), pero no se como.

David · #2 (**permalink**) 16/06/2009, 06:47

Tal vez te resulte más práctico dejar sin validar ese campo. Así no necesitas mostrar/ocultar (que de hecho no influirá en si se validará o no)

gioramies · #3 (**permalink**) 16/06/2009, 07:31

También puedes colocar una variable bandera que te indique si el campo se está mostrando o está oculto y luego validarlo o no validarlo.

De_la_Cuesta_13 · #4 (**permalink**) 16/06/2009, 15:12

Cordial Saludo,

Compañeros ya he logrado resolver ese problema, era más fácil de lo que pensaba

Dejo el código para que lo revisen, y si tienen la oportunidad lo usen.

Código HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Imagenes con PHP</title>
<script type="text/JavaScript">
<!--

function guarda_img(elemento) {

  if(elemento.value=="n") {
      document.getElementById("div_subir_img").style.display = "none";
   } else {
      document.getElementById("div_subir_img").style.display = "block"; 

   }
}

////////////////////////////////////////////////////////////////////////////////////

function GetFileExtension(Filename) { 
var I = Filename.lastIndexOf("."); 
return (I > -1) ? Filename.substring(I + 1, Filename.length).toLowerCase() : ""; 

} 

////////////////////////////////////////////////////////////////////////////////////

function validar(formulario) {

//valido que el campo ccemp tenga mínimo 6 números
if (formulario.ccemp.value.length<6){ 
       alert("La Cédula del Empleado debe tener mínimo 6 números.") 
       formulario.ccemp.focus() 
       return (false);
    }

//valido que el campo ccemp tenga solo números
var checkOK = "0123456789"; 
  var checkStr = formulario.ccemp.value; 
  var allValid = true; 
  var decPoints = 0; 
  var allNum = ""; 
  for (i = 0; i < checkStr.length; i++) { 
    ch = checkStr.charAt(i); 
    for (j = 0; j < checkOK.length; j++) 
      if (ch == checkOK.charAt(j))
        break; 
    if (j == checkOK.length) { 
      allValid = false; 
      break; 
    } 
    allNum += ch; 
  } 
  if (!allValid) { 
    alert("Escriba sólo números en el campo Cédula del Empleado.");
    formulario.ccemp.focus(); 
    return (false); 
  } 


if (document.getElementById("div_subir_img").style.display == "block"){

var Form = document.formulario; 
var File1 = Form.archivo.value; 

var Ext = ""; 
if (File1 == "") {
	alert("No haz seleccionado ninguna imagen."); 
	return false;
	 } 

if (File1 != "") { 
Ext = GetFileExtension(File1); 
	if (Ext != "jpeg" && Ext != "jpg" && Ext != "png" && Ext != "gif"){
	alert("El archivo no es una imagen válida.");
        return false;
	}
} 


}

//Si todo ya esta correcto envio
alert("Se ha Enviado la Información.");
return (true);

}

-->
</script>
</head>
<body>
<form id="formulario" name="formulario" action="upload.php" 
enctype="multipart/form-data" method="post" onSubmit="return validar(this)">

Cédula &nbsp;&nbsp;<INPUT TYPE="TEXT" NAME="ccemp" size='15' maxlength="15"><br>

Guardar Fotografía
<input type="radio" name="gimg" id="gimg"  value="s" onclick="guarda_img(this)" />Si
<input type="radio" name="gimg" id="gimg"  value="n" onclick="guarda_img(this)" checked="checked"/>No
<br />

<div id="div_subir_img" style="display:none">
Archivo
<input type="file" id="archivo" name="archivo" onchange="LimitAttach(this,1) "/>
</div><br>

<input type="submit" value="Enviar"/>
</form>

</body>

De_la_Cuesta_13 · #5 (**permalink**) 16/06/2009, 15:15

Cordial Saludo,

Compañeros ya he logrado resolver ese problema, era más fácil de lo que pensaba

Dejo el código para que lo revisen, y si tienen la oportunidad lo usen.

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Imagenes con PHP</title>
<script type="text/JavaScript">
<!--

function guarda_img(elemento) {

  if(elemento.value=="n") {
      document.getElementById("div_subir_img").style.display = "none";
   } else {
      document.getElementById("div_subir_img").style.display = "block"; 

   }
}

////////////////////////////////////////////////////////////////////////////////////

function GetFileExtension(Filename) { 
var I = Filename.lastIndexOf("."); 
return (I > -1) ? Filename.substring(I + 1, Filename.length).toLowerCase() : ""; 

} 

////////////////////////////////////////////////////////////////////////////////////

function validar(formulario) {

//valido que el campo ccemp tenga mínimo 6 números
if (formulario.ccemp.value.length<6){ 
       alert("La Cédula del Empleado debe tener mínimo 6 números.") 
       formulario.ccemp.focus() 
       return (false);
    }

//valido que el campo ccemp tenga solo números
var checkOK = "0123456789"; 
  var checkStr = formulario.ccemp.value; 
  var allValid = true; 
  var decPoints = 0; 
  var allNum = ""; 
  for (i = 0; i < checkStr.length; i++) { 
    ch = checkStr.charAt(i); 
    for (j = 0; j < checkOK.length; j++) 
      if (ch == checkOK.charAt(j))
        break; 
    if (j == checkOK.length) { 
      allValid = false; 
      break; 
    } 
    allNum += ch; 
  } 
  if (!allValid) { 
    alert("Escriba sólo números en el campo Cédula del Empleado.");
    formulario.ccemp.focus(); 
    return (false); 
  } 


if (document.getElementById("div_subir_img").style.display == "block"){

var Form = document.formulario; 
var File1 = Form.archivo.value; 

var Ext = ""; 
if (File1 == "") {
	alert("No haz seleccionado ninguna imagen."); 
	return false;
	 } 

if (File1 != "") { 
Ext = GetFileExtension(File1); 
	if (Ext != "jpeg" && Ext != "jpg" && Ext != "png" && Ext != "gif"){
	alert("El archivo no es una imagen válida.");
        return false;
	}
} 


}

//Si todo ya esta correcto envio
alert("Se ha Enviado la Información.");
return (true);

}

-->
</script>
</head>
<body>
<form id="formulario" name="formulario" action="upload.php" 
enctype="multipart/form-data" method="post" onSubmit="return validar(this)">

Cédula &nbsp;&nbsp;<INPUT TYPE="TEXT" NAME="ccemp" size='15' maxlength="15"><br>

Guardar Fotografía
<input type="radio" name="gimg" id="gimg"  value="s" onclick="guarda_img(this)" />Si
<input type="radio" name="gimg" id="gimg"  value="n" onclick="guarda_img(this)" checked="checked"/>No
<br />

<div id="div_subir_img" style="display:none">
Archivo
<input type="file" id="archivo" name="archivo" onchange="LimitAttach(this,1) "/>
</div><br>

<input type="submit" value="Enviar"/>
</form>

</body>
</html>