Javascript
Hola que tal!
Tienes idea de como crear campos, algunos obligaorios de llenar y otros no, ¿y validarlos?
Tienes idea de como crear campos, algunos obligaorios de llenar y otros no, ¿y validarlos?
1 respuesta
Respuesta de claudiopazos
1
Te paso el código de una página sencilla que hace lo que estas precisando.
Faltaría agregar un action en el form para que los campos sean enviados ante una validación ok a una página .php donde poder usar esos datos.
Cualquier duda me consultas.
Saludos.
_______________________________________________________________________
<html>
<head>
<script>
var posicionCampo=1;
function agregarUsuario()
{
nuevaFila = document.getElementById("tablaUsuarios").insertRow(-1);
nuevaFila.id=posicionCampo;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td><input type='text' size='15' name='nombre["+posicionCampo+"]'></td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='10' name='web["+posicionCampo+"]'></td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='10' name='correo["+posicionCampo+"]' ></td>";
posicionCampo++;
}
function validate()
{
inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++)
{
nombre=inputs.name;
nombredividido=nombre.split('[');
Campo=nombredividido[0]; // con esto me quedo solo con el nombre del campo sin el [x], útil para un array php
switch (campo)
{
case 'nombre':
if (!validacionnombre(inputs.value))
{
alert(inputs.name+" no paso la validacion");
return false;
}
break;
case 'web':
if (!validacionweb(inputs.value))
{
alert(inputs.name+" no paso la validacion");
return false;
}
break;
case 'correo':
if (!validacioncorreo(inputs.value))
{
alert(inputs.name+" no paso la validacion");
return false;
}
break;
}
}
return true;
}
function validacionnombre(valor)
{
//Acá poner el código de validación para los campos llamados nombre, retornar true si esta bien, o false si esta mal
//ahora solo controlo que tenga algo
if(valor=="")
{
return false;
}
return true;
}
function validacionweb(valor)
{
//Acá poner el código de validación para los campos llamados web, retornar true si esta bien, o false si esta mal
//ahora solo controlo que tenga algo
if(valor=="")
{
return false;
}
return true;
}
function validacioncorreo(valor)
{
//Acá poner el código de validación para los campos llamados correo, retornar true si esta bien, o false si esta mal
//ahora solo controlo que tenga algo
if(valor=="")
{
return false;
}
return true;
}
</script>
</head>
<body>
<center>
<input type="button" onClick="agregarUsuario()" value="Nuevo usuario" >
<form method="post" onsubmit="return validate();">
<table id="tablaUsuarios">
<tr>
<td width="175">Nombre</td>
<td width="175">Sitio Web </td>
<td width="100">Correo</td>
</tr>
</table>
<input type="submit" value="Enviar">
</form>
</center>
</body>
</html>
Faltaría agregar un action en el form para que los campos sean enviados ante una validación ok a una página .php donde poder usar esos datos.
Cualquier duda me consultas.
Saludos.
_______________________________________________________________________
<html>
<head>
<script>
var posicionCampo=1;
function agregarUsuario()
{
nuevaFila = document.getElementById("tablaUsuarios").insertRow(-1);
nuevaFila.id=posicionCampo;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td><input type='text' size='15' name='nombre["+posicionCampo+"]'></td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='10' name='web["+posicionCampo+"]'></td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='10' name='correo["+posicionCampo+"]' ></td>";
posicionCampo++;
}
function validate()
{
inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++)
{
nombre=inputs.name;
nombredividido=nombre.split('[');
Campo=nombredividido[0]; // con esto me quedo solo con el nombre del campo sin el [x], útil para un array php
switch (campo)
{
case 'nombre':
if (!validacionnombre(inputs.value))
{
alert(inputs.name+" no paso la validacion");
return false;
}
break;
case 'web':
if (!validacionweb(inputs.value))
{
alert(inputs.name+" no paso la validacion");
return false;
}
break;
case 'correo':
if (!validacioncorreo(inputs.value))
{
alert(inputs.name+" no paso la validacion");
return false;
}
break;
}
}
return true;
}
function validacionnombre(valor)
{
//Acá poner el código de validación para los campos llamados nombre, retornar true si esta bien, o false si esta mal
//ahora solo controlo que tenga algo
if(valor=="")
{
return false;
}
return true;
}
function validacionweb(valor)
{
//Acá poner el código de validación para los campos llamados web, retornar true si esta bien, o false si esta mal
//ahora solo controlo que tenga algo
if(valor=="")
{
return false;
}
return true;
}
function validacioncorreo(valor)
{
//Acá poner el código de validación para los campos llamados correo, retornar true si esta bien, o false si esta mal
//ahora solo controlo que tenga algo
if(valor=="")
{
return false;
}
return true;
}
</script>
</head>
<body>
<center>
<input type="button" onClick="agregarUsuario()" value="Nuevo usuario" >
<form method="post" onsubmit="return validate();">
<table id="tablaUsuarios">
<tr>
<td width="175">Nombre</td>
<td width="175">Sitio Web </td>
<td width="100">Correo</td>
</tr>
</table>
<input type="submit" value="Enviar">
</form>
</center>
</body>
</html>
