We have the Opening of Stories page, in which you can see phase 1 of the registration that would be the personal data.
document.querySelector("form").reset();
$("input[name='sex']").change(function(){
if( $(this).val()== "H")
document.getElementById('bann').src = "../img/banner.png";
if( $(this).val()== "F")
document.getElementById('bann').src = "../img/banner2.png";
$("footer").attr("enabled", $(this).val() == "F").toggleClass("bg-girl");
$("h2.f1").attr("enabled", $(this).val() == "F").html("Identificación de la Paciente");
if( $(this).val()== "H")
$("h2.f1").html("Identificación del Paciente");
});
$(document).ready(function() {
//Validación Fase 1 de Registro
$(":text").keyup(function() {
$(":text").each(function () {
if($(this).val() == '') {
$("#sbt1").attr("disabled","disabled");
}
else {
$("#sbt1").removeAttr("disabled");
}
});
});
})
$(".boxuno").on( 'change', function() {
if( $(this).is(':checked') ) {
//Validación Fase 2 de Registro
$("#sbt2").removeAttr("disabled");
}
else {
$("#sbt2").attr("disabled","disabled");
}
});
$(".boxdos").on( 'change', function() {
if( $(this).is(':checked') ) {
//Validación Fase 3 de Registro
$("#sbt3").removeAttr("disabled");
}
else {
$("#sbt3").attr("disabled","disabled");
}
});
$(document).ready(function(){
$('.siguiente').click(function(){
var current = $(this).parent();
var next = $(this).parent().next();
$(".progress li").eq($("fieldset").index(next)).addClass("active");
current.hide();
next.show();
})
$('.atras').click(function(){
var current = $(this).parent();
var prev = $(this).parent().prev()
$(".progress li").eq($("fieldset").index(current)).removeClass("active");
current.hide();
prev.show();
})
})
$(window).load(function(){
$(function() {
$('#diagram').change(function(e) {
addImage(e);
});
function addImage(e){
var file = e.target.files[0],
imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
}
function fileOnload(e) {
var result=e.target.result;
$('#odontodiagram').attr("src",result);
}
});
});
@font-face
{
font-family: 'Amaranth';
font-style: normal;
font-weight: 400;
src: local('Amaranth Regular'), local('Amaranth-Regular'), url(../font/Amaranth.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face
{
font-family: 'Merienda';
font-style: normal;
font-weight: 400;
src: local('Merienda'), local('Merienda-Regular_0_wt'), url(../font/Merienda.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body
{
margin: 0;
}
header img
{/*Banner Inicio*/
width: 100% !important;
}/*Banner Fin*/
h1
{/*Titulo de Página Inicio*/
font-family: 'Merienda', cursive;
text-align: center;
}/*Titulo de Página Fin*/
h2
{/*Titulo de Página Inicio*/
color: black;
font-family: 'Merienda', cursive;
margin-bottom: 5%;
text-align: center;
}/*Titulo de Página Fin*/
/*MENU PRINCIPAL ODONTOLOGIA INICIO*/
nav
{
width: 100% !important;
}
nav ul
{
align-items: center;
display: flex;
justify-content: space-between;
list-style: none;
padding: 0.5rem 1rem;
}
nav ul li
{
margin-left: 3.5%;
margin-right: 3.5%;
}
nav ul li a
{
display: inline-block;
line-height:100% !important;
text-align: center;
text-decoration: none;
}
nav ul li a:hover
{
background-color: #1c5b99;
border-radius: 50%;
color: white;
font-family: 'Amaranth', sans-serif;
}
/*MENU PRINCIPAL ODONTOLOGIA FIN*/
a:visited,a:link
{/*Enlaces Inicio*/
color: black;
}/*Enlaces Fin*/
footer
{/*Pié de Página*/
background-color: #1c5b99;
color: white;
font-family: 'Amaranth';
text-align: center;
}/*Pié de Página*/
form
{
margin-left: 5%;
margin-right: 5%;
}
fieldset
{/*Marco de la Tabla*/
background-color: #DCF9E4;
border-bottom-right-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important;
width: 95%;
}/*Marco de la Tabla*/
fieldset:not(:first-of-type)
{
display:none;
}
legend
{/*Título de la Tabla*/
background-color: #DCF9E4;
border-top-right-radius: 0.25rem !important;
color: black;
margin-bottom: 2%;
padding-left: 3%;
padding-right: 3%;
text-align: center;
}/*Título de la Tabla*/
table
{
caption-side: top;
margin: 0 0 1em 0;
width: 100%;
}
/*MODIFICACIONES NECESARIAS PARA LA CAPTURA DE DATOS*/
label
{
font-family: 'Amaranth', sans-serif;
color: black;
text-transform: capitalize; /* Títulos para los Antecedentes*/
}
input[type=text]
{
color: black;
text-transform: capitalize; /* Transformación de Texto*/
}
input[type=number]
{
appearance: textfield;
-moz-appearance: textfield;
}
input#email, input#telefono
{
text-transform: none; /* Sin Transformación de Texto en el campo email*/
}
.titulo
{/*Botones Principales Inicio*/
background-color: white;
border: none;
font-family: 'Merienda', cursive;
width:100%;
}/*Bones Principales Fin*/
div.campo
{
color: black;
margin-left: 25%;
margin-right: 25%; /* Datos Identificación del Paciente*/
}
.at1
{
width: 23%;
}
.at2
{
width: 40%;
}
.at3
{
width: 20%;
}
.tboxuno{
float: right;
margin-right: 15%;
}
.tboxdos{
float: right;
margin-right: 15%;
}
.tr1
{
width: 30%;
}
.tr2
{
width: 40%;
}
#identificacion,#carne,#nombre,#apellido,#telefono,#email,#domicilio
{/* Identificación del Paciente*/
text-align: center;
}/* Campo Tel del Paciente*/
/*MODIFICACIONES NECESARIAS PARA LA CAPTURA DE DATOS*/
#cls
{/*FIELDSET CONSULTA PACIENTE*/
margin-left:15%;
width: 70%;
}/*FIELDSET CONSULTA PACIENTE*/
.boton1
{ /* Boton de Guardado*/
background-color: #28a745;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
float: right;
margin-top: 1%;
margin-right: 1.8%;
padding: 0.375rem 0.75rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}/* Boton de Guardado*/
.boton2
{ /* Boton de Limpieza*/
background-color: #6c757d;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
float: right;
margin-top: 1%;
margin-right:1.8%;
padding: 0.375rem 0.75rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}/* Boton de Limpieza*/
.boton3
{ /* Boton de Busqueda*/
background-color:#17a2b8;
margin-left: 25%;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
padding: 0.375rem 0.75rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}/* Boton de Busqueda*/
#boton4
{ /* Boton de Modificaciones*/
background-color: #28a745;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
float: right;
margin-top: 1%;
margin-right: 12%;
padding: 0.375rem 0.75rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}/* Boton de Modificaciones*/
#boton5
{ /* Boton de Eliminacion*/
background-color:#dc3545;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
float: right;
margin-top: 1%;
margin-right:1.8%;
padding: 0.375rem 0.75rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
} /* Boton de Eliminacion*/
#boton6
{ /* Boton de Reporte*/
background-color: #20c997;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
float: left;
margin-top: 1%;
margin-left: 15%;
padding: 0.375rem 0.75rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}/* Boton de Reporte*/
#pie:visited,#pie:link,#pie{
color: white;
text-decoration: none;
}
.bg-girl
{/*SEXO FEMENINO*/
background-color: #dc3545;
}/*SEXO FEMENINO*/
.tcampo
{/* Títulos para los Antecedentes Del Paciente*/
color:black;
font-style: italic;
text-align: center;
text-decoration: underline;
text-transform: capitalize;
}/* Títulos para los Antecedentes Del Paciente*/
.saltos
{
margin-top: 10px;
}
.siguiente,.atras{
background-color: #27ae60;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
padding: 0.4rem 0.5rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.siguiente{
float: right;
}
.siguiente:hover, .atras:hover{
box-shadow:0 0 0 2px #fff, 0 0 0 4px #27ae60;
}
/*Progressbar*/
ul.progress{
margin-left: 0;
}
.progress {
margin-bottom: 4%;
margin-top: 4%;
overflow: hidden;
counter-reset: step;
text-align: center;
}
.progress li {
list-style-type: none;
color: #000;
text-transform: capitalize;
font-size: 12px;
width: 33%;
margin-left:-1.1%;
float: left;
position: relative;
}
.progress li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
.progress li:after {
content: '';
width: 100%;
height: 2px;
background: #fff;
position: absolute;
left: -50%;
top: 9px;
z-index:-1; /*put it behind the numbers*/
}
.progress li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
.progress li.active:before, .progress li.active:after{
background: #27AE60;
color: white;
}
#pie:visited,#pie:link,#pie{
color: white;
text-decoration: none;
}
@media screen and (width: 1024px) and (height: 420px){ /* 1024 * 600 Ventana*/
header img{ max-height: 76px; }
h1{ margin-top: 4%; margin-bottom: 0%; }
nav ul li a{ font-size:15px; height: 50px; padding-top: 15px; }
footer{ height: 61px; padding-top: 15px; margin-top: 4.1%;}
button.titulo{ font-size: 33px; margin-bottom: 0%; margin-top: 2.15%; }
div.campo,.tboxuno,.tboxdos,label{ font-size: 14px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" content="width=device-width, no initial-scale=1.0">
<title>Nuevo Registro</title>
</head>
<body>
<form>
<!--Progressbar-->
<ul class='progress'>
<li class="active">Identificación del Paciente</li>
<li>Antecedentes Personales</li>
<li>Tratamientos Realizados</li>
</ul>
<fieldset>
<h2 class="f1">Identificación del Paciente</h2>
<table>
<td>
<div class="campo">
<label><input type="text" id="identificacion" autocomplete="off" onblur="CI()" required>Cédula</label>
</div>
</td>
<td>
<div class="campo">
<label><input type="text" id="nombre" autocomplete="off" required > Nombres</label>
</div>
</td>
<td>
<div class="campo">
<label ><input type="text" id="telefono" autocomplete="off" required> Teléfono</label>
</div>
</td>
<tr class="saltos"></tr>
<td>
<div class="campo">
<label><input type="text" id="carne" autocomplete="off" required> Carné</label>
</div>
</td>
<td>
<div class="campo">
<label><input type="text" id="apellido" autocomplete="off" required> Apellidos</label>
</div>
</td>
<td>
<div class="campo">
<label><input type="text" id="email" autocomplete="off" required> Correo</label>
</div>
</td>
<tr></tr>
<td>
<div class="campo">
<label> <input id="date" type="date" required><br> Fecha de Nacimiento</label>
</div>
</td>
<td>
<div style="margin-left:25%;">
<input type="radio" name="sex" value="H" checked><label> Hombre</label>
<input type="radio" name="sex" value="F"><label> Mujer</label>
</div>
</td>
<td>
<div class="campo">
<label><input type="text" id="domicilio" autocomplete="off" required> Dirección</label>
</div>
</td>
</table>
<input type='button' id="sbt1" class="siguiente" value="Siguiente" disabled>
</fieldset>
<fieldset>
<h2>Antecedentes Personales</h2>
<table>
<td>
<div class="tcampo"> Tratamientos: </div>
</td>
<td>
<div class="tcampo" style="float:right; "> Padecimientos: </div>
</td>
<td></td>
<td>
<div class="tcampo" style="float:left; "> Alergias: </div>
</td>
<tr></tr>
<td class="at">
<div class="tboxuno">Embarazo
<input type="checkbox" class="boxuno" name="t1">
</div>
</td>
<td class="at">
<div class="tboxuno">Discapacidad
<input type="checkbox" class="boxuno" name="p1">
</div>
</td>
<td class="at">
<div class="tboxuno"> Asma
<input type="checkbox" class="boxuno" name="p2">
</div>
</td>
<td class="at">
<div class="tboxuno"> Aspirina
<input type="checkbox" class="boxuno" name="a1" >
</div>
</td>
<tr></tr>
<td class="at">
<div class="tboxuno">Consultas Médicas
<input type="checkbox" class="boxuno" name="t2" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Ulcera Gástrica
<input type="checkbox" class="boxuno" name="p3" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Anemía
<input type="checkbox" class="boxuno" name="p4" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Penicilina
<input type="checkbox" class="boxuno" name="a2" >
</div>
</td>
<tr></tr>
<td class="at">
<div class="tboxuno">Consumo de Tabaco
<input type="checkbox" class="boxuno" name="t3" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Fiebre Reumática
<input type="checkbox" class="boxuno" name="p5" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Tíroides
<input type="checkbox" class="boxuno" name="p6" >
</div>
</td>
<td class="at">
<div class="tboxuno">Anestesia
<input type="checkbox" class="boxuno" name="a3" >
</div>
</td>
<tr></tr>
<td class="at">
<div class="tboxuno">Transfusión Sanguínea
<input type="checkbox" class="boxuno" name="t4" >
</div>
</td>
<td class="at">
<div class="tboxuno">Respiración Bucal
<input type="checkbox" class="boxuno" name="p7" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Diabetes
<input type="checkbox" class="boxuno" name="p8" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Iodo
<input type="checkbox" class="boxuno" name="a4" >
</div>
</td>
<tr></tr>
<td class="at">
<div class="tboxuno">Intervención Quirúrgica
<input type="checkbox" class="boxuno" name="t5" >
</div>
</td>
<td class="at">
<div class="tboxuno">Defícit de Vitamina K
<input type="checkbox" class="boxuno" name="p9" >
</div>
</td>
<td class="at">
<div class="tboxuno">Hepatitís
<input type="checkbox" class="boxuno" name="p10" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Otros
<input type="checkbox" class="boxuno" name="a5" >
</div>
</td>
<tr></tr>
<td class="at">
<div class="tboxuno">Consumo de Pastillas A.C
<input type="checkbox" class="boxuno" name="t6" >
</div>
</td>
<td class="at">
<div class="tboxuno">Apretamiento Dentario
<input type="checkbox" class="boxuno" name="p11" >
</div>
</td>
<td class="at">
<div class="tboxuno">Leucemía
<input type="checkbox" class="boxuno" name="p12" >
</div>
</td>
<td>
</td>
<tr></tr>
<td>
</td>
<td class="at">
<div class="tboxuno">Problemas del Corazón
<input type="checkbox" class="boxuno" name="p13" >
</div>
</td>
<td class="at">
<div class="tboxuno">Hemofilia
<input type="checkbox" class="boxuno" name="p14" >
</div>
</td>
<td>
</td>
<tr></tr>
<td>
</td>
<td class="at">
<div class="tboxuno">Enfermedades Venéreas
<input type="checkbox" class="boxuno" name="p15" >
</div>
</td>
<td>
</td>
<td>
</td>
<tr></tr>
<td>
</td>
<td class="at">
<div class="tboxuno"> Herpes o Aftas frecuentes
<input type="checkbox" class="boxuno" name="p16" >
</div>
</td>
<td>
</td>
<tr></tr>
<td>
</td>
<td class="at">
<div class="tboxuno">Ruidos al abrir/cerrar boca
<input type="checkbox" class="boxuno" name="p17" >
</div>
</td>
<td>
</td>
<tr></tr>
<td>
</td>
<td class="at">
<div class="tboxuno">Lim. para abrir/cerrar boca
<input type="checkbox" class="boxuno" name="p18" >
</div>
</td>
<td>
</td>
<tr></tr>
<td>
</td>
<td class="at">
<div class="tboxuno">Sangrado Excesivo al Cortarse
<input type="checkbox" class="boxuno" name="p19" >
</div>
</td>
<td>
</td>
</table>
<input type='button' id="sbt2" class='siguiente' value="Siguiente" disabled>
<input type='button' class='atras' value="Atrás">
</fieldset>
<fieldset>
<h2>Tratamientos Realizados</h2>
<table>
<td class="tr1">
<div class="tboxdos">Rayos X
<input type="checkbox" class="boxdos" name="tt1" >
</div>
</td>
<td class="tr1">
<div class="tboxdos">Control
<input type="checkbox" class="boxdos" name="tt2" >
</div>
</td>
<td class="tr2">
<div class="tboxdos">Momificaciones
<input type="checkbox" class="boxdos" name="tt3" >
</div>
</td>
<tr></tr>
<td class="tr1">
<div class="tboxdos">Profilaxis
<input type="checkbox" class="boxdos" name="tt4" >
</div>
</td>
<td class="tr1">
<div class="tboxdos">Cirujia Dental
<input type="checkbox" class="boxdos" name="tt5" >
</div>
</td>
<td class="tr2">
<div class="tboxdos">Topoficación de Flúor
<input type="checkbox" class="boxdos" name="tt6" >
</div>
</td>
<tr></tr>
<td class="tr1">
<div class="tboxdos">Tratectomia
<input type="checkbox" class="boxdos" name="tt7" >
</div>
</td>
<td class="tr1">
<div class="tboxdos">Raspado y Alisado
<input type="checkbox" class="boxdos" name="tt8" >
</div>
</td>
<td class="tr2">
<div class="tboxdos">Sellantes de Fosas y Fisuras
<input type="checkbox" class="boxdos" name="tt9" >
</div>
</td>
<tr></tr>
<td class="tr1">
<div class="tboxdos">Emergencias
<input type="checkbox" class="boxdos" name="tt10" >
</div>
</td>
<td class="tr1">
<div class="tboxdos">Operatorias Dental
<input type="checkbox" class="boxdos" name="tt11" >
</div>
</td>
<td class="tr2">
<div class="tboxdos">Administración de Medicamentos
<input type="checkbox" class="boxdos" name="tt12" >
</div>
</td>
</table>
<input type='button' class="atras" value="Atrás">
<input type='submit' id="sbt3" class="siguiente" value="Guardar" disabled>
</fieldset>
</form >
<footer>
<a id="pie" href="menu">Programa Nacional de Formación en Informática © 2019</a>
</footer>
</body>
</html>
Please, I need to add another condition so that the following button is activated correctly. Currently, if all inputs of the text type are not empty, the disabled attribute is removed , but it is also necessary to consider the input date in order to progress properly.
I add my Code, Thanks in advance!
To quickly solve what you ask for, in the part where you have the "keyup" event to validate all the text fields, you can add the following:
Así cuando terminen de evaluarse los campos de texto, antes de pasar a la última condición para habilitar el botón, verifica que no esté vacío el campo DATE.
Igualmente agrega un evento para cuando cambie el valor del campo date, en caso de que sea el último campo en modificarse no haya error.
Muchas Gracias por tu apoyo, la respuesta definitiva quedaría asi