FORMULARIO NEON
Este tipo de formulario cuenta con un atractivo color luminiscente, que resalta gracias al color de fondo oscuro con efecto degradado, sin mencionar la animación con la que cuenta el titulo. Estos son 2 puntos claves para llamar fácilmente la atención del usuario, ahora enfoquemonos en los demás elementos del formulario, estos cuentan con un efecto hover que produce una sombra del mismo tono luminiscente. Como último detalle, el formulario cuenta con un scroll vertical oculto para brindar una mejor vista, y con una validacion desde js para revisar que ningún campo este vacío.
<form class="formulario1-ejemplo">
<h3><span>FORMULARIO 1</span></h3>
<input type="text" placeholder="Escriba algo" class="formulario1-text" id="form1-text">
<select name="" id="form1-select" class="formulario1-select">
<option value="" disabled selected>Seleccione una:</option>
<option value="1">Opcion 1</option>
<option value="2">Opcion 2</option>
<option value="3">Opcion 3</option>
<option value="4">Opcion 4</option>
</select>
<p>Pasaremos el semestre:</p>
<div class="formulario1-radios">
<input type="radio" name="form1-radios" id="si">
<label for="si">Si</label>
</div>
<div class="formulario1-radios">
<input type="radio" name="form1-radios" id="no">
<label for="no">No</label>
</div>
<textarea placeholder="Escriba mucho texto aqui" rows="6" class="formulario1-textarea" id="form1-textarea"></textarea>
<div class="formulario1-botones">
<input type="submit" value="Enviar" id="form1-enviar">
<input type="reset" value="Limpiar">
</div>
</form>
/* FORM EJEMPLO */
.formulario1-ejemplo{
width: 300px;
height: 300px;
/*fondo degradado*/
background-image: linear-gradient(to right, rgb(22, 22, 22), rgb(46, 46, 46));
border-radius: 10px;
border: 4px solid;
padding: 20px;
/*scroll*/
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
overflow-y: scroll;
animation:borde 5s ease infinite
}
/* TITULO */
.formulario1-ejemplo h3{
color: white;
font-size: 20px;
text-align: center;
box-shadow: 12px 12px 12px aqua;
}
/*Para el titulo*/
.formulario1-ejemplo h3 span{
font-family: "Oswald", sans-serif;
font-size: 20px;
letter-spacing: 0;
padding: .25em 0 .325em;
display: block;
margin: 0 auto;
text-shadow: 0 0 80px rgba(255,255,255,.5);
/* Clip de imagen de fondo */
background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
-webkit-background-clip: text;
background-clip: text;
/* Animacion de imagen de fondo */
-webkit-text-fill-color: transparent;
-webkit-animation: aitf 80s linear infinite;
/* Activacion de la aceleracion de hardware para las animaciones smoother */
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}
/* Para el movimiento del titulo */
@-webkit-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
/* animacion del borde */
@keyframes borde{
0%{border-color: white;}
25%{border-color: aqua;}
50%{border-color: white;}
75%{border-color: aqua; }
100%{border-color: white; }
}
/* Scrollbar oculto para Chrome, Safari and Opera */
.formulario1-ejemplo::-webkit-scrollbar {
display: none;
}
/* SOMBRA */
.formulario1-ejemplo:hover{
box-shadow: 12px 12px 12px #0000005d;
}
/* INPUT TEXT */
.formulario1-ejemplo .formulario1-text{
border-radius: 10px;
cursor: pointer;
box-shadow: 3px 3px 2px #0000005d;
padding: 5px;
width: 100%;
margin-top: 20px;
}
.formulario1-ejemplo .formulario1-text:hover {
border-color: black;
box-shadow: 3px 3px 2px aqua;
}
/* OUTLINE */
.formulario1-ejemplo .formulario1-text:focus,.formulario1-select:focus, .formulario1-textarea:focus{
outline: none;
}
/* SELECT */
.formulario1-ejemplo .formulario1-select{
margin-top: 20px;
border-radius: 10px;
cursor: pointer;
font-size: 100%;
box-shadow: 3px 3px 2px #0000005d;
padding: 5px;
width: 100%;
}
.formulario1-ejemplo .formulario1-select:hover {
border-color: black;
box-shadow: 3px 3px 2px aqua;
}
/*combo de opciones del select*/
.formulario1-ejemplo .formulario1-select option {
background-color: rgb(255, 123, 0);
color: black;
}
/* RADIO */
.formulario1-ejemplo .formulario1-radios{
background: white;
border-radius: 10px;
box-shadow: 5px 5px 5px #0000005d;
padding: 2px;
margin-top: 3px;
width: 100%;
cursor: pointer;
}
.formulario1-ejemplo p{
border-radius: 10px;
padding: 2px;
margin-top: 20px;
color: white;
}
input[type="radio"]+label{
cursor: pointer;
padding: 10px;
}
/* sombra de los radios */
.formulario1-ejemplo .formulario1-radios:hover{
box-shadow: 3px 3px 2px aqua;
}
/* TEXTAREA */
.formulario1-ejemplo .formulario1-textarea{
margin-top: 20px;
width: 100%;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
overflow-y: scroll;
border-radius: 10px;
padding: 10px;
cursor: pointer;
}
/* Scrollbar oculto para Chrome, Safari and Opera */
.formulario1-ejemplo .formulario1-textarea::-webkit-scrollbar {
display: none;
}
.formulario1-ejemplo .formulario1-textarea:hover{
box-shadow: 3px 3px 2px aqua;
}
/* BOTONES */
.formulario1-ejemplo .formulario1-botones{
margin-top: 20px;
text-align: center;
}
/* SUBMIT, RESET */
.formulario1-ejemplo .formulario1-botones input[type="submit"], .formulario1-botones input[type="reset"]{
border-radius: 10px;
background-color: white;
color: black;
padding: 6px 10px 6px 10px;
cursor: pointer;
}
.formulario1-ejemplo .formulario1-botones input[type="submit"]:hover, .formulario1-botones input[type="reset"]:hover{
border-radius: 10px;
box-shadow: 3px 3px 2px aqua;
border: 2px solid black;
}
(function(){
var text=document.getElementById("form1-text"),
textarea=document.getElementById("form1-textarea"),
select=document.getElementById("form1-select"),
radios=document.getElementsByName("form1-radios"),
btnEnviar=document.getElementById("form1-enviar");
/*Funcion para el boton submit*/
btnEnviar.addEventListener("click", (event)=>{
if(validarForm()){ //valido que no esten vacios los campos
//tu codigo aqui
}
else{//si estan vacios muestro un mensaje
window.alert("Debe completar todos los campos");
}
});
/*Funcion para validar que el formulario no este vacio*/
function validarForm(){
/* validar los radios */
var seleccionado = false;
for(var i=0; i<radios.length; i++){//recorre las opciones
if(radios[i].checked) { //si alguno es checado (seleccionado)
seleccionado = true; //se vuelve verdadera la bandera
break;//sale del ciclo
}
}
/* Condicional para vlidar todos los campos */
if(text.value=="" || text.length == 0 || /^\s+$/.test(text) || textarea.value=="" || textarea.length == 0 || /^\s+$/.test(textarea) || select.value == null || select.value == 0 || seleccionado==false){
return false; //si no cumple
}
else{
return true;//todos los datos estan completos
}
}
})();
FORMULARIO CLASSIC UNDERLINE
Este es un ejemplo de formulario sencillo pero elegante, cuenta con un contenedor de base el cual tiene un fondo degradado para dar juego a los elementos del formulario, además, cuenta con un efecto hover sobre cualquier elemento para mostrarle al usuario en que parte esta colocado, sin mencionar que al posicionarse sobre un elemento, este mostrara el cursor. Como último detalle, el formulario cuenta con un scroll vertical oculto para brindar una mejor vista, y con una validacion desde js para revisar que ningún campo este vacío.
<div class="formulario2-fondo">
<form class="formulario2-ejemplo">
<h3>FORMULARIO</h3>
<input type="text" placeholder="Escriba algo" class="formulario2-text unstyle" id="form2-text">
<select name="" id="form2-select" class="formulario2-select unstyle">
<option value="" disabled selected>Seleccione una:<span>▼</span></option>
<option value="1">Opcion 1</option>
<option value="2">Opcion 2</option>
<option value="3">Opcion 3</option>
<option value="4">Opcion 4</option>
</select>
<p>Pasaremos el semestre:</p>
<div class="formulario2-radios">
<input type="radio" name="form2-radios" id="si">
<label for="si">Si</label>
</div>
<div class="formulario2-radios">
<input type="radio" name="form2-radios" id="no">
<label for="no">No</label>
</div>
<textarea placeholder="Escriba mucho texto aqui" rows="6" class="formulario2-textarea unstyle" id="form2-textarea"></textarea>
<div class="formulario2-botones">
<input type="button" value="SEND" class="formulario2-boton" id="form2-enviar">
</div>
</form>
</div>
/* FORM EJEMPLO */
.formulario2-ejemplo{
width: 350px;
height: 320px;
background-color: white;
border-radius: 10px;
padding: 20px;
/*scroll*/
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
overflow-y: scroll;
}
.formulario2-fondo{
background-image: linear-gradient(to right, rgb(70, 70, 70), rgb(122, 122, 122));
width: 420px;
height: 400px;
margin: 5rem;
padding: 20px;
border-radius: 10px;
}
/* Scrollbar oculto para Chrome, Safari and Opera */
.formulario2-ejemplo::-webkit-scrollbar {
display: none;
}
/* TITULO */
.formulario2-ejemplo h3{
color: rgb(27, 27, 27);
font-size: 20px;
text-align: center;
}
/* SOMBRA */
.formulario2-ejemplo:hover{
box-shadow: 12px 12px 12px #0000005d;
}
/* OUTLINE */
.formulario2-ejemplo .formulario2-text:focus, .formulario2-select:focus, .formulario2-textarea:focus, .formulario2-boton{
outline: none;
}
/* RESETEAR ESTILOS */
.unstyle{
all: unset;
}
/* INPUT TEXT */
.formulario2-ejemplo .formulario2-text{
border: 0;
border-bottom: 2px solid rgb(112, 112, 112);
background-color: white;
width: 100%;
margin-top: 20px;
}
/* SELECT */
.formulario2-ejemplo .formulario2-select{
border-bottom: 2px solid rgb(112, 112, 112);
background-color: white;
width: 100%;
margin-top: 20px;
}
.formulario2-ejemplo p{
margin-top: 20px;
}
/* RADIOS */
.formulario2-ejemplo .formulario2-radios{
content: "";
}
/* TEXAREA */
.formulario2-ejemplo .formulario2-textarea{
border: 0;
border-bottom: 2px solid rgb(112, 112, 112);
background-color:white;
width: 100%;
margin-top: 20px;
}
/* BOTON */
.formulario2-ejemplo .formulario2-botones{
text-align: center;
}
.formulario2-ejemplo .formulario2-boton{
background-image: linear-gradient(to right, rgb(247, 63, 39), rgb(243, 84, 63));
border-radius: 10px;
padding: 5px 15px;
margin-top: 20px;
font-size: 18px;
color: white;
border-style: none;
}
.formulario2-ejemplo .formulario2-boton:hover{
border: 1px solid black;
box-shadow: 4px 4px 4px #0000005d;
}
/* HOVER */
.formulario2-ejemplo .formulario2-text:hover, .formulario2-ejemplo .formulario2-select:hover, .formulario2-ejemplo .formulario2-textarea:hover, .formulario2-ejemplo .formulario2-radios:hover{
border-bottom: 2px solid rgb(247, 63, 39);
}
/* CURSOR */
.formulario2-ejemplo .formulario2-text, .formulario2-ejemplo .formulario2-select, .formulario2-ejemplo .formulario2-textarea, .formulario2-ejemplo .formulario2-radios, .formulario2-ejemplo .formulario2-boton{
cursor: pointer;
}
(function(){
var text=document.getElementById("form2-text"),
textarea=document.getElementById("form2-textarea"),
select=document.getElementById("form2-select"),
radios=document.getElementsByName("form2-radios"),
btnEnviar=document.getElementById("form2-enviar");
/*Funcion para el boton submit*/
btnEnviar.addEventListener("click", (event)=>{
if(validarForm()){ //valido que no esten vacios los campos
//tu codigo aqui
}
else{//si estan vacios muestro un mensaje
window.alert("Debe completar todos los campos");
}
});
/*Funcion para validar que el formulario no este vacio*/
function validarForm(){
/* validar los radios */
var seleccionado = false;
for(var i=0; i<radios.length; i++){//recorre las opciones
if(radios[i].checked) { //si alguno es checado (seleccionado)
seleccionado = true; //se vuelve verdadera la bandera
break;//sale del ciclo
}
}
/* Condicional para vlidar todos los campos */
if(text.value=="" || text.length == 0 || /^\s+$/.test(text) ||
textarea.value=="" || textarea.length == 0 || /^\s+$/.test(textarea) ||
select.value == null || select.value == 0 ||
seleccionado==false){
return false; //si no cumple
}
else{
return true;//todos los datos estan completos
}
}
})();
FORMULARIO UNFOCUSED IMAGE
Este tipo de formulario cuenta con una imagen de fondo y sobre esta una capa de desenfoque para generar un mejor diseño y contraste con los elementos. Además, sus elementos cuentan con una transparencia de fondo, y sus botones incluyen un efecto hover que hace resaltar la seleccion del usuario. Como último detalle, el formulario cuenta con un scroll vertical oculto para brindar una mejor vista, y con una validacion desde js para revisar que ningún campo este vacío.
<form class="formulario3-ejemplo formulario3-fondo">
<div class="formulario3-capa">
<h3>FORMULARIO</h3>
<input type="text" placeholder="Escriba algo" class="formulario3-text required autofocus" id="form3-text">
<select name="" class="formulario3-select" id="form3-select">
<option value="" disabled selected>Seleccione una:</option>
<option value="1">Opcion 1</option>
<option value="2">Opcion 2</option>
<option value="3">Opcion 3</option>
<option value="4">Opcion 4</option>
</select>
<p>Pasaremos el semestre:</p>
<div class="formulario3-radios">
<input type="radio" name="form3-radios" id="si">
<label for="si">Si</label>
<input type="radio" name="form3-radios" id="no">
<label for="no">No</label>
</div>
<textarea placeholder="Escriba mucho texto aqui" rows="6" class="formulario3-textarea" id="form3-textarea"></textarea>
<div class="formulario3-botones">
<input type="submit" value="Enviar" id="form3-enviar">
<input type="reset" value="Limpiar">
</div>
</div>
</form>
/* FORM EJEMPLO */
.formulario3-fondo{
background-image: url(ruta de tu imagen);
background-size: 100% 100%;
width: 300px;
height: 300px;
}
.formulario3-ejemplo{
width: 300px;
height: 300px;
border-radius: 10px;
border: 3px solid black;
/* scroll */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
overflow-y: scroll;
}
/*Fondo desenfocado*/
.formulario3-capa{
backdrop-filter: blur(4px);
width: 300px;
height: auto;
padding: 20px;
}
/* Scrollbar oculto para Chrome, Safari and Opera */
.formulario3-info .formulario3-ejemplo::-webkit-scrollbar {
display: none;
}
/* SOMBRA */
.formulario3-info .formulario3-ejemplo:hover{
box-shadow: 12px 12px 12px #0000005d;
}
/* TITULO */
.formulario3-ejemplo .formulario3-capa h3{
color: white;
letter-spacing: 2px;
font-size: 20px;
text-align: center;
font-weight: bolder;
text-shadow: 5px 5px 4px #000000af;
border-bottom: 2px solid black;
}
/* OUTLINE */
.formulario3-ejemplo .formulario3-capa .formulario3-text:focus,.formulario3-ejemplo .formulario3-capa .formulario3-select:focus, .formulario3-ejemplo .formulario3-capa .formulario3-textarea:focus{
outline: none;
}
/* INPUT TEXT */
.formulario3-info .formulario3-ejemplo .formulario3-capa .formulario3-text, .formulario3-ejemplo .formulario3-capa .formulario3-textarea{
border: 0;
border-bottom: 2px solid rgb(112, 112, 112);
width: 100%;
margin-top: 20px;
/*transparencia*/
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
padding: 5px;
font-weight: bold;
}
/* TEXTAREA */
.formulario3-ejemplo .formulario3-capa .formulario3-textarea{
overflow: scroll;
resize: none;
}
/* SELECT */
.formulario3-ejemplo .formulario3-capa .formulario3-select{
margin-top: 20px;
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
padding: 5px;
font-weight: bold;
cursor: pointer;
}
/* RADIOS */
.formulario3-ejemplo .formulario3-capa p{
margin-top: 20px;
text-align: center;
color: white;
font-weight: bold;
border-bottom: 2px solid rgb(7, 248, 248);
}
/* LABEL DE LOS RADIOS */
.formulario3-ejemplo .formulario3-capa .radios label{
display: inline-flex;
color: #fdfdfd;
font-size: 20px;
margin-top:5px;
padding: 5px;
}
.formulario3-ejemplo .formulario3-capa .radios label:hover{
border-bottom: 2px solid rgb(7, 248, 248);
height: 25px;
}
.formulario3-ejemplo .formulario3-capa .radios{
text-align: center;
}
/* BOTON */
.formulario3-ejemplo .formulario3-capa .formulario3-botones{
margin-top: 20px;
text-align: center;
}
.formulario3-ejemplo .formulario3-capa .formulario3-botones input[type="submit"], .formulario3-ejemplo .formulario3-capa .formulario3-botones input[type="reset"]{
background-color: transparent;
color: white;
font-size: 20px;
padding: 3px 15px;
font-weight: bolder;
box-shadow: 5px 5px 4px #0000005d;
border-radius: 3px;
border:2px solid black;
margin-bottom: 20px;
text-shadow: 5px 5px 4px #00000081;
}
.formulario3-ejemplo .formulario3-capa .formulario3-botones input[type="submit"]:hover, .formulario3-ejemplo .formulario3-capa .formulario3-botones input[type="reset"]:hover{
background-color: rgb(7, 248, 248);
}
(function(){
var text=document.getElementById("form3-text"),
textarea=document.getElementById("form3-textarea"),
select=document.getElementById("form3-select"),
radios=document.getElementsByName("form3-radios"),
btnEnviar=document.getElementById("form3-enviar");
/*Funcion para el boton submit*/
btnEnviar.addEventListener("click", (event)=>{
if(validarForm()){ //valido que no esten vacios los campos
//tu codigo aqui
}
else{//si estan vacios muestro un mensaje
window.alert("Debe completar todos los campos");
}
});
/*Funcion para validar que el formulario no este vacio*/
function validarForm(){
/* validar los radios */
var seleccionado = false;
for(var i=0; i<radios.length; i++){//recorre las opciones
if(radios[i].checked) { //si alguno es checado (seleccionado)
seleccionado = true; //se vuelve verdadera la bandera
break;//sale del ciclo
}
}
/* Condicional para vlidar todos los campos */
if(text.value=="" || text.length == 0 || /^\s+$/.test(text) || textarea.value=="" || textarea.length == 0 || /^\s+$/.test(textarea) || select.value == null || select.value == 0 || seleccionado==false){
return false; //si no cumple
}
else{
return true;//todos los datos estan completos
}
}
})();
FORMULARIO SUNLIGHT
Este tipo de formularios hace uso de un borde animado en cada elemento, además, la mayoria de sus elementos cuentan con un fondo transparente. Cabe mencionar que el fondo del formulario cuenta con un fondo de degradado para darle una brindar una mejor sensación al usuario. Como último detalle, el formulario cuenta con un scroll vertical oculto para brindar una mejor vista, y con una validacion desde js para revisar que ningún campo este vacío.
<form class="formulario4-ejemplo" id="form4-ejemplo">
<span>Dato:</span><input type="text" placeholder="Escriba algo" class="formulario4-text" id="form4-text">
<span>Dato:</span><select name="" class="formulario4-select" id="form4-select">
<option value="" disabled selected></option>
<option value="1">Opcion 1</option>
<option value="2">Opcion 2</option>
<option value="3">Opcion 3</option>
<option value="4">Opcion 4</option>
</select>
<form class="formulario4-radios">
<p>Pasaremos el semestre:</p>
<input type="radio" name="form4-radios" id="si">
<label for="si">Si</label>
<input type="radio" name="form4-radios" id="no">
<label for="no">No</label>
</div>
<textarea placeholder="Escriba mucho texto aqui" rows="6" class="formulario4-textarea" id="form4-textarea"></textarea>
<div class="formulario4-botones" id="form4-enviar">✅</div>
</form>
/* FORM EJEMPLO */
.formulario4-ejemplo{
font-family: "Roboto", sans-serif;
width: 300px;
height: 300px;
border-radius: 10px;
border: 3px solid;
padding: 20px;
/*Scroll*/
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
overflow-y: scroll;
/*Fondo*/
background-image: linear-gradient(to right, rgb(247, 91, 29), rgb(252, 163, 80));
}
/* Scrollbar oculto para Chrome, Safari and Opera */
.formulario4-info .formulario4-ejemplo::-webkit-scrollbar {
display: none;
}
/* SOMBRA */
.formulario4-info .formulario4-ejemplo:hover{
box-shadow: 12px 12px 12px #0000005d;
}
/* OUTLINE */
.formulario4-ejemplo .formulario4-text:focus,.formulario4-select:focus, .formulario4-textarea:focus, .formulario4-boton{
outline: none;
}
/* INPUT TEXT */
.formulario4-info .formulario4-ejemplo span{
color: white;
font-size: 20px;
}
/* INPUT TEXT, TEXTAREA, SELECT, RADIOS */
.formulario4-ejemplo input[type="text"], .formulario4-ejemplo .formulario4-textarea, .formulario4-ejemplo .formulario4-select, .formulario4-ejemplo .formulario4-radios{
position: relative;
margin-top: 20px;
animation:borde 5s ease infinite;
border-radius: 10px;
border: 4px solid;
padding: 7px;
background-color: transparent;
font-weight: bold;
}
/* SELECT */
.formulario4-ejemplo .formulario4-select{
cursor: pointer;
}
/*animacion del borde*/
@keyframes borde{
0%{border-color: white;}
25%{border-color: aqua;}
50%{border-color: white;}
75%{border-color: aqua; }
100%{border-color: white; }
}
.formulario4-ejemplo .formulario4-select option{
padding: 10px;
font-weight: bold;
background-color: white;
}
/* RADIOS */
.formulario4-ejemplo .formulario4-radios {
margin-top: 20px;
text-align: center;
}
.formulario4-ejemplo .formulario4-radios p{
color: white;
font-size: 20px;
}
/* TEXTAREA */
.formulario4-ejemplo .formulario4-textarea{
width: 100%;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
overflow-y: scroll;
}
/* Scrollbar oculto para Chrome, Safari and Opera */
.formulario4-ejemplo .formulario4-textarea::-webkit-scrollbar {
display: none;
}
::placeholder{
color: black;
}
/* BOTONES */
.formulario4-ejemplo .formulario4-botones{
margin-left: auto;
margin-right: auto;
width: 50px;
height: 50px;
font-size: 40px;
cursor: pointer;
}
.formulario4-ejemplo .formulario4-botones:hover{
box-shadow: 5px 5px 5px #000000a1;
}
(function(){
var text=document.getElementById("form4-text"),
textarea=document.getElementById("form4-textarea"),
select=document.getElementById("form4-select"),
radios=document.getElementsByName("form4-radios"),
btnEnviar=document.getElementById("form4-enviar");
/*Funcion para el boton submit*/
btnEnviar.addEventListener("click", (event)=>{
if(validarForm()){ //valido que no esten vacios los campos
document.getElementById("form4-ejemplo").reset(); //limpiar el formulario
//tu codigo aqui
}
else{//si estan vacios muestro un mensaje
window.alert("Debe completar todos los campos");
}
});
/*Funcion para validar que el formulario no este vacio*/
function validarForm(){
/* validar los radios */
var seleccionado = false;
for(var i=0; i<radios.length; i++){//recorre las opciones
if(radios[i].checked) { //si alguno es checado (seleccionado)
seleccionado = true; //se vuelve verdadera la bandera
break;//sale del ciclo
}
}
/* Condicional para vlidar todos los campos */
if(text.value=="" || text.length == 0 || /^\s+$/.test(text) || textarea.value=="" || textarea.length == 0 || /^\s+$/.test(textarea) || select.value == null || select.value == 0 || seleccionado==false){
return false; //si no cumple
}
else{
return true;//todos los datos estan completos
}
}
})();