diff --git a/curriculumsearch/src/main/resources/static/main.js b/curriculumsearch/src/main/resources/static/main.js
index 6652c4a..9070da3 100644
--- a/curriculumsearch/src/main/resources/static/main.js
+++ b/curriculumsearch/src/main/resources/static/main.js
@@ -13,7 +13,18 @@ const postulaciones = [];
 var cont_referencias=0 ;
 const referencias= [];
 
+form = document.querySelector("form");
+const depSelect = document.querySelector("#departamentos");
+
+console.log("saddsa", bootstrap)
+const modalCargo = bootstrap.Modal.getOrCreateInstance(document.getElementById('cargoForm'))
+const modalExperiencia = bootstrap.Modal.getOrCreateInstance(document.getElementById('experienciaForm'))
+const modalTecnologia = bootstrap.Modal.getOrCreateInstance(document.getElementById('tecnologiaForm'))
+const modalEstudio = bootstrap.Modal.getOrCreateInstance(document.getElementById('estudioForm'))
+const modalReferencia = bootstrap.Modal.getOrCreateInstance(document.getElementById('referenciaForm'))
+//variable ciudades esta declarada en el jsp
 
+/*-----------------Definicion de funciones de poblacion de elementos y validaciones----------------------------------------*/
 
 const formValidator = function () {
     'use strict'
@@ -37,114 +48,66 @@ const formValidator = function () {
             }, false)
         })
 }
-function carg(elemento) {
-    var element = document.getElementById('descripcion');
-    if(elemento == "otro"){
-    element.style.display='block';
-    }else{
-    element.style.display='none';
+function fechasMaxMin(){
+    var today = new Date();
+    var dd = today.getDate()-1;
+    var mm = today.getMonth() + 1; //January is 0!
+    var yyyy = today.getFullYear();
+
+    if (dd < 10) {
+        dd = '0' + dd;
     }
-}
-function agregarFieldExpierncia(event){
-    //recoger del form
-    const pairs = {};
-    const formexp = document.querySelector("[name=experiencia-form]");
-    formexp.classList.add('was-validated')
-    const formData = new FormData(formexp);
-    let error=validarfecha(formData.get("fechaDesde"), formData.get("fechaHasta"))
-    let appendTo = "Hasta";
-   if (error) {
 
-        if(error.includes("desde")) appendTo = "Desde";
-        formexp.querySelector(".errorfecha"+appendTo)
-        
-        formexp['fecha'+appendTo].setCustomValidity(error)
-        document.querySelector(".errorfecha"+appendTo).innerHTML = error;
-        console.log(error);
-        
-   }
-   else{
-    formexp.fechaDesde.setCustomValidity('')
-    formexp.fechaHasta.setCustomValidity('')
-   }
-    
-    const reconocimientos = [{},{},{}];
-    let pos_rec;
-    let returnFlag = false;
+    if (mm < 10) {
+        mm = '0' + mm;
+    }
 
-    let requiredValues = ["institucion", "cargo", "fechaDesde"]
+    today = yyyy + '-' + mm + '-' + dd;
 
-    formData.forEach((value, key)=>{
-        if(requiredValues.includes(key)
-        && value==="" && returnFlag == false){
-            console.log(key, value)
-            returnFlag = true;
-        }
-    });
 
-    if(returnFlag===true){
-        let message = "Rellene "
-        for(let i=0;i<requiredValues.length;i++){
-            message+=", "+requiredValues[i];
-        }
-        message += " como minimo."
-        alert(message);
-        return;
-    }
+    let fechaDesdeEstudio = document.querySelector("#fechaDesdeEstudio");
+    let fechaDesdeExperiencia = document.querySelector("#fechaDesdeExperiencia");
+    let fechaHastaEstudio = document.querySelector("#fechaHastaEstudio");
+    let fechaHastaExperiencia = document.querySelector("#fechaHastaExperiencia");
+    let fechaNacimiento = document.querySelector("#fechaNacimiento");
+    let fechas = [fechaDesdeEstudio,fechaDesdeExperiencia,fechaHastaEstudio,fechaHastaExperiencia,fechaNacimiento]
+    fechas.forEach(fch => fch.addEventListener('keydown',()=>false))//no dejar cargar manualmente fechas
 
-    for (const [name, value] of formData){
-        pos_rec = name.split("-");//rec-nombre-index
-        if (pos_rec.length > 1) {
-            reconocimientos[pos_rec[2]][pos_rec[1]] = value
-        }
-        else{
-            pairs[name] = value
-        }
+    fechaDesdeEstudio.setAttribute("max", today);
+    fechaDesdeExperiencia.setAttribute("max", today);
+    fechaNacimiento.setAttribute("max", today);
 
+    fechaDesdeExperiencia.addEventListener("change", ()=>{
+        fechaHastaExperiencia.setAttribute("min", fechaDesdeExperiencia.value)
+    })
+    fechaDesdeEstudio.addEventListener("change", ()=>{
+        fechaHastaEstudio.setAttribute("min", fechaDesdeEstudio.value)
+    })
+}
+
+ function listarCiudades(depId){
+    const ciuAmostrar = ciudades.filter(c=>c.departamentoId==depId);
+    const ciudad = document.querySelector("select[name=ciudadId]");
+    const frag = document.createDocumentFragment();
+    for (const ciu of ciuAmostrar) {
+        const opt = document.createElement("option");    
+        opt.value = ciu.id;
+        opt.innerHTML = ciu.nombre;
+        opt.setAttribute("data-departamentoId",ciu.departamentoId);
+        frag.appendChild(opt)
     }
-    pairs["reconocimientos"] = reconocimientos.filter(rec => rec.nombre);
-    experiencias[cont_experiencia] = pairs;
-    formexp.reset();
-    formexp.classList.remove('was-validated')
-    //imprimir lista actualizada
-    const div = document.querySelector("#experiencias")
-    const div1 = document.createElement('div');
+    ciudad.replaceChildren(frag);
+    
     
-    let content='';
-    for (let index = 0; index < experiencias.length; index++) {
-        const exp = experiencias[index];
-        if(exp==null) continue;
-        content += `
-        <div class="col border border-3" id="exp-${index}">
-                    <h4><center>Experiencia</center></h4>      
-                    <label><b>Institucion:</b> ${exp.institucion}</label><br>  
-                    <label><b>Fecha Inicio:</b> ${exp.fechaDesde}</label><br>
-                    <label><b>Fecha Fin:</b> ${exp.fechaHasta}</label><br>
-                    <label><b>Referencia:</b> ${exp.nombreReferencia}</label><br>
-                    <label><b>Telefono de la referencia:</b> ${exp.telefonoReferencia}</label><br>
-                    <label><b>Cargo:</b> ${exp.cargo}</label><br>
-                    <label><b>Motivo de salida:</b> ${exp.motivoSalida}</label><br>
-            
-            <button type="button" class="btn btn-primary" onclick="eliminarExperiencia(event)"> <span class="glyphicon glyphicon-trash"></span>Eliminar</button>
-        </div>
-        
-        `
-    }
-    //content += "</ul>" 
-    div.innerHTML = content
-    //div.innerHTML = '';
-    //div.appendChild(div1);
-    cont_experiencia++;
 }
+
 function validarfecha(fechaDesde, fechaHasta){
     let fechadehoy= new Date().toISOString().slice(0,10);
 
     if(fechaDesde>fechadehoy ){
        return "la fecha desde no puede ser mayor a la fecha actual" ;   
     }
-    if(fechaHasta =! null && fechaHasta>fechadehoy){
-        return "la fecha hasta no puede ser mayor a la fecha actual" ;  
-    } 
+    
     if(fechaHasta =! null && fechaDesde>fechaHasta){
         return "la fecha desde no puede ser mayor a la fecha hasta";
     
@@ -152,7 +115,7 @@ function validarfecha(fechaDesde, fechaHasta){
         return false
   
 }
-/*--------------------------------------------------------------------*/
+/*-----------------Tecnologia----------------------------------------*/
 function agregarFieldTecnologia(){
     //recoger del form
     const pairs = {};
@@ -217,146 +180,135 @@ function agregarFieldTecnologia(){
     cont_tecnologia++;
     document.querySelector("#no-valid-tecno").style.display = "none";
 }
-
-
-/*--------------------------------------------------------------------*/
-function eliminarExperiencia(event) {
-    //eliminar del array
-    experiencias[event.target.parentElement.id.split("-")[1]]=null
-    //eliminar en html
-    event.target.parentElement.remove()
-}
-/*----------------------------------------------------------------- */
 function eliminarTecnologia(event) {
     //eliminar del array
     tecnologias[event.target.parentElement.id.split("-")[1]]=null
     //eliminar en html
     event.target.parentElement.remove()
 }
-/*----------------------------------------------------------------- */
-function serializeJSON (form) {
-    // Create a new FormData object
-    const formData = new FormData(form);
 
-    if(formData.get('fechaNacimiento')>=new Date().toISOString().slice(0,10)){
-        form['fechaNacimiento'].setCustomValidity('Fecha de nacimiento debe ser menor que actual')
-        noValidateFlag = true;
-        return;
+/*----------------Experiencia-----------------------------------------*/
+function agregarFieldExpierncia(event){
+    //recoger del form
+    const pairs = {};
+    const formexp = document.querySelector("[name=experiencia-form]");
+    formexp.classList.add('was-validated')
+    const formData = new FormData(formexp);
+    let error=validarfecha(formData.get("fechaDesde"), formData.get("fechaHasta"))
+    let appendTo = "Hasta";
+    if (error) {
+
+            if(error.includes("desde")) appendTo = "Desde";
+            
+            
+            formexp['fecha'+appendTo].setCustomValidity(error)
+            formexp.querySelector(".errorFecha"+appendTo).innerHTML = error;
+            console.log(error);
+            
     }
     else{
-        form['fechaNacimiento'].setCustomValidity('')   
+        formexp.fechaDesde.setCustomValidity('')
+        formexp.fechaHasta.setCustomValidity('')
     }
+    
+    const reconocimientos = [{},{},{}];
+    let pos_rec;
+    let returnFlag = false;
 
+    let requiredValues = ["institucion", "cargo", "fechaDesde"]
 
-    // Create an object to hold the name/value pairs
-    const pairs = {};
+    formData.forEach((value, key)=>{
+        if(requiredValues.includes(key)
+        && value==="" && returnFlag == false){
+            console.log(key, value)
+            returnFlag = true;
+        }
+    });
 
-    // Add each name/value pair to the object
-    for (const [name, value] of formData) {
-        pairs[name] = value
-    }
-    pairs["experiencias"] = experiencias.filter(exp => exp)//eliminacion de nulos
-    pairs["estudios"] = estudios.filter(est => est)//eliminacion de nulos
-    pairs["tecnologias"] = tecnologias.filter(tec => tec)//eliminacion de nulos
-    pairs["postulaciones"] = postulaciones.filter(car => car)//eliminacion de nulos
-    pairs["referencias"] = referencias.filter(tec => tec)
-    if(pairs["postulaciones"].length<1){
-        document.querySelector("#no-valid-cargo").style.display = "block";
-        noValidateFlag = true;
-    }else{
-        document.querySelector("#no-valid-cargo").style.display = "none";
-    }
-    console.log(pairs["tecnologias"])
-    if(pairs["tecnologias"].length<1){
-        document.querySelector("#no-valid-tecno").style.display = "block";
-        noValidateFlag = true;
-    }else{
-        document.querySelector("#no-valid-tecno").style.display = "none";
-    }
-    if(noValidateFlag){
+    if(returnFlag===true){
+        let message = "Rellene "
+        for(let i=0;i<requiredValues.length;i++){
+            message+=", "+requiredValues[i];
+        }
+        message += " como minimo."
+        //alert(message);
         return;
     }
-    noValidateFlag = false
-    
-    // Return the JSON string
-    return JSON.stringify(pairs, null, 2);
-}
 
-function obtenerCV(){
-    let input = document.querySelector('#cvFile')
-    return input.files[0];
-  
-}
+    for (const [name, value] of formData){
+        pos_rec = name.split("-");//rec-nombre-index
+        if (pos_rec.length > 1) {
+            reconocimientos[pos_rec[2]][pos_rec[1]] = value
+        }
+        else{
+            pairs[name] = value
+        }
 
-async function postData(url = '', data = {}) {
-    var token = document.querySelector("meta[name='_csrf']").content;
-    var headerxs = document.querySelector("meta[name='_csrf_header']").content;
-    // Default options are marked with *
-    let senddata = {
-        method: 'POST', // *GET, POST, PUT, DELETE, etc.
-        mode: 'cors', // no-cors, *cors, same-origin
-        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-        credentials: 'same-origin', // include, *same-origin, omit
-        headers: {
-            //'Content-Type': undefined//'application/json',
-            // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        redirect: 'follow', // manual, *follow, error
-        referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
-        body: data // body data type must match "Content-Type" header
     }
-    senddata["headers"][headerxs] = token;
-    let response = null
-    if(!noValidateFlag){
-        response = await fetch(url, senddata);
+    pairs["reconocimientos"] = reconocimientos.filter(rec => rec.nombre);
+    experiencias[cont_experiencia] = pairs;
+    formexp.reset();
+    formexp.classList.remove('was-validated')
+    //imprimir lista actualizada
+    const div = document.querySelector("#experiencias")
+    const div1 = document.createElement('div');
+    
+    let content='';
+    for (let index = 0; index < experiencias.length; index++) {
+        const exp = experiencias[index];
+        if(exp==null) continue;
+        content += `
+        <div class="col border border-3" id="exp-${index}">
+                    <h4><center>Experiencia</center></h4>      
+                    <label><b>Institucion:</b> ${exp.institucion}</label><br>  
+                    <label><b>Fecha Inicio:</b> ${exp.fechaDesde}</label><br>
+                    <label><b>Fecha Fin:</b> ${exp.fechaHasta}</label><br>
+                    <label><b>Referencia:</b> ${exp.nombreReferencia}</label><br>
+                    <label><b>Telefono de la referencia:</b> ${exp.telefonoReferencia}</label><br>
+                    <label><b>Cargo:</b> ${exp.cargo}</label><br>
+                    <label><b>Motivo de salida:</b> ${exp.motivoSalida}</label><br>
+            
+            <button type="button" class="btn btn-primary" onclick="eliminarExperiencia(event)"> <span class="glyphicon glyphicon-trash"></span>Eliminar</button>
+        </div>
+        
+        `
     }
-    return response; // parses JSON response into native JavaScript objects
+    //content += "</ul>" 
+    div.innerHTML = content
+    //div.innerHTML = '';
+    //div.appendChild(div1);
+    cont_experiencia++;
+    modalExperiencia.hide()
 }
-
-function formatearJsonWithFile(json, file){
-    formData = new FormData();
-
-    formData.append("file", file);
-    formData.append('postulante', new Blob([json], {
-                type: "application/json"
-            }));
-    return formData
+function eliminarExperiencia(event) {
+    //eliminar del array
+    experiencias[event.target.parentElement.id.split("-")[1]]=null
+    //eliminar en html
+    event.target.parentElement.remove()
 }
-formValidator()
-form = document.querySelector("form");
-form.addEventListener("submit",(evt)=>{
-    // if (!form.checkValidity()) {
-    //     evt.preventDefault()
-    //     evt.stopPropagation()
-    // }
-    // form.classList.add('was-validated')
-    evt.preventDefault();
-    let formSerialized = serializeJSON(form);
-    let fileCV = obtenerCV();
-    if(!noValidateFlag){
-        postData('work-with-us', formatearJsonWithFile(formSerialized,fileCV))
-            .then(response => {
-                if(response.status==200 || response.status==302){
-                    location.replace(response.url);
-                }else{
-                    console.log(response.text().then(value => console.log(value)))
-                }
-            });
-        }
-    noValidateFlag = false
-} );
-
-
-
-//Metodos para Estudios
-
-
+/*---------------Estudios---------------------------*/
 
 function agregarFieldEstudio(){
     //recoger del form
     let pairs = {};
     const formest = document.querySelector("[name=estudio-form]");
     const formData = new FormData(formest);
+    formest.classList.add('was-validated')
+    let error=validarfecha(formData.get("fechaDesde"), formData.get("fechaHasta"))
+    let appendTo = "Hasta";
+    if (error) {
+
+            if(error.includes("desde")) appendTo = "Desde";
+            
+            formest['fecha'+appendTo].setCustomValidity(error)
+            formest.querySelector(".errorFecha"+appendTo).innerHTML = error;
+            console.log(error);
+            
+    }
+    else{
+        formest.fechaDesde.setCustomValidity('')
+        formest.fechaHasta.setCustomValidity('')
+    }
 
     //Validacion
     let returnFlag = false;
@@ -377,7 +329,7 @@ function agregarFieldEstudio(){
             message+=", "+requiredValues[i];
         }
         message += " como minimo."
-        alert(message);
+        //alert(message);
         return;
     }
 
@@ -430,20 +382,17 @@ function agregarFieldEstudio(){
     //div.innerHTML = '';
     //div.appendChild(div1);
     cont_estudios++;
-
+    formest.classList.remove('was-validated')
+    modalEstudio.hide()
 }
 
-
-
-
-
 function eliminarEstudio(event) {
     //eliminar del array
     estudios[event.target.parentElement.id.split("-")[1]]=null
     //eliminar en html
     event.target.parentElement.remove()
 }
-/*--------------------------------------------------------------------*/
+/*------------Cargos----------------------------------------*/
 function agregarFieldCargo(){
     //recoger del form
     const pairs = {};
@@ -513,49 +462,21 @@ function agregarFieldCargo(){
     //div.appendChild(div1);
     cont_cargo++;
     document.querySelector("#no-valid-cargo").style.display = "none";
+    modalCargo.hide()
 }
-
-/*---------------------------------------------------------------------------------------------------*/
 function eliminarCargoPostulante(event) {
     //eliminar del array
     postulaciones[event.target.parentElement.id.split("-")[1]]=null
     //eliminar en html
     event.target.parentElement.remove()
 }
-/*--------------------------------------------------------------------*/
-
-
-//evento para cambio de ciudad segun departamento
-const depSelect = document.querySelector("#departamentos");
-depSelect.addEventListener("change",evt => listarCiudades(evt.target.value))
-listarCiudades(depSelect.value);
-//variable ciudades esta declarada en el jsp
-/**
- * Listar todas las ciudades en el select de ciudades
- * @param {*} depId 
- */
-function listarCiudades(depId){
-    const ciuAmostrar = ciudades.filter(c=>c.departamentoId==depId);
-    const ciudad = document.querySelector("select[name=ciudadId]");
-    const frag = document.createDocumentFragment();
-    for (const ciu of ciuAmostrar) {
-        const opt = document.createElement("option");    
-        opt.value = ciu.id;
-        opt.innerHTML = ciu.nombre;
-        opt.setAttribute("data-departamentoId",ciu.departamentoId);
-        frag.appendChild(opt)
-    }
-    ciudad.replaceChildren(frag);
-    
-    
-}
-
-
 
+/*--------------Referencias----------------------------- */
 function agregarFieldReferencia(event){
     //recoger del form
     const pairs = {};
     const formexp = document.querySelector("[name=referencia-form]");
+    formexp.classList.add('was-validated')
     const formData = new FormData(formexp);
     const referenciaPersonal = [{},{},{}];
     let pos_rec;
@@ -577,7 +498,7 @@ function agregarFieldReferencia(event){
             message+=", "+requiredValues[i];
         }
         message += " como minimo."
-        alert(message);
+        //alert(message);
         return;
     }
 
@@ -617,71 +538,147 @@ function agregarFieldReferencia(event){
     //div.innerHTML = '';
     //div.appendChild(div1);
     cont_referencias++;
+    formexp.classList.remove('was-validated')
+    modalExperiencia.hide()
 }
-
-/*----------------------------------------------------------------- */
 function eliminarReferencia(event) {
     //eliminar del array
     referencias[event.target.parentElement.id.split("-")[1]]=null
     //eliminar en html
     event.target.parentElement.remove()
 }
-/*----------------------------------------------------------------- */
-
-
-
-/*--------------------------------------------------------------------------------------------------------- */
-// $(function(){
-//     $("#wizard").steps({
-//     headerTag: "h4",
-//     bodyTag: "section",
-//     transitionEffect: "fade",
-//     enableAllSteps: true,
-//     transitionEffectSpeed: 500,
-//     onStepChanging: function (event, currentIndex, newIndex) {
-//     if ( newIndex === 1 ) {
-//     $('.steps ul').addClass('step-2');
-//     } else {
-//     $('.steps ul').removeClass('step-2');
-//     }
-//     if ( newIndex === 2 ) {
-//     $('.steps ul').addClass('step-3');
-//     } else {
-//     $('.steps ul').removeClass('step-3');
-//     }
-//
-//     if ( newIndex === 3 ) {
-//     $('.steps ul').addClass('step-4');
-//     $('.actions ul').addClass('step-last');
-//     } else {
-//     $('.steps ul').removeClass('step-4');
-//     $('.actions ul').removeClass('step-last');
-//     }
-//     return true;
-//     },
-//     labels: {
-//     finish: "Order again",
-//     next: "Next",
-//     previous: "Previous"
-//     }
-//     });
-//     // Custom Steps Jquery Steps
-//     $('.wizard > .steps li a').click(function(){
-//     $(this).parent().addClass('checked');
-//     $(this).parent().prevAll().addClass('checked');
-//     $(this).parent().nextAll().removeClass('checked');
-//     });
-//     // Custom Button Jquery Steps
-//     $('.forward').click(function(){
-//     $("#wizard").steps('next');
-//     })
-//     $('.backward').click(function(){
-//     $("#wizard").steps('previous');
-//     })
-//     // Checkbox
-//     $('.checkbox-circle label').click(function(){
-//     $('.checkbox-circle label').removeClass('active');
-//     $(this).addClass('active');
-//     })
-//     })
-/*--------------------------------------------------------------------------------------------------------- */
\ No newline at end of file
+/*--------------Form submit----------------------------- */
+function serializeJSON (form) {
+    // Create a new FormData object
+    const formData = new FormData(form);
+
+    if(formData.get('fechaNacimiento')>=new Date().toISOString().slice(0,10)){
+        form['fechaNacimiento'].setCustomValidity('Fecha de nacimiento debe ser menor que actual')
+        noValidateFlag = true;
+        return;
+    }
+    else{
+        form['fechaNacimiento'].setCustomValidity('')   
+    }
+
+
+    // Create an object to hold the name/value pairs
+    const pairs = {};
+
+    // Add each name/value pair to the object
+    for (const [name, value] of formData) {
+        pairs[name] = value
+    }
+    pairs["experiencias"] = experiencias.filter(exp => exp)//eliminacion de nulos
+    pairs["estudios"] = estudios.filter(est => est)//eliminacion de nulos
+    pairs["tecnologias"] = tecnologias.filter(tec => tec)//eliminacion de nulos
+    pairs["postulaciones"] = postulaciones.filter(car => car)//eliminacion de nulos
+    pairs["referencias"] = referencias.filter(tec => tec)
+    if(pairs["postulaciones"].length<1){
+        document.querySelector("#no-valid-cargo").style.display = "block";
+        noValidateFlag = true;
+    }else{
+        document.querySelector("#no-valid-cargo").style.display = "none";
+    }
+    console.log(pairs["tecnologias"])
+    if(pairs["tecnologias"].length<1){
+        document.querySelector("#no-valid-tecno").style.display = "block";
+        noValidateFlag = true;
+    }else{
+        document.querySelector("#no-valid-tecno").style.display = "none";
+    }
+    if(noValidateFlag){
+        return;
+    }
+    noValidateFlag = false
+    
+    // Return the JSON string
+    return JSON.stringify(pairs, null, 2);
+}
+
+function obtenerCV(){
+    let input = document.querySelector('#cvFile')
+    return input.files[0];
+  
+}
+
+async function postData(url = '', data = {}) {
+    var token = document.querySelector("meta[name='_csrf']").content;
+    var headerxs = document.querySelector("meta[name='_csrf_header']").content;
+    // Default options are marked with *
+    let senddata = {
+        method: 'POST', // *GET, POST, PUT, DELETE, etc.
+        mode: 'cors', // no-cors, *cors, same-origin
+        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+        credentials: 'same-origin', // include, *same-origin, omit
+        headers: {
+            //'Content-Type': undefined//'application/json',
+            // 'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        redirect: 'follow', // manual, *follow, error
+        referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+        body: data // body data type must match "Content-Type" header
+    }
+    senddata["headers"][headerxs] = token;
+    let response = null
+    if(!noValidateFlag){
+        response = await fetch(url, senddata);
+    }
+    return response; // parses JSON response into native JavaScript objects
+}
+
+function formatearJsonWithFile(json, file){
+    formData = new FormData();
+
+    formData.append("file", file);
+    formData.append('postulante', new Blob([json], {
+                type: "application/json"
+            }));
+    return formData
+}
+
+/*--------------Llamar funciones y agregar listeners----------------------------- */
+formValidator();
+fechasMaxMin();
+listarCiudades(depSelect.value);
+
+form.addEventListener("submit",(evt)=>{
+    // if (!form.checkValidity()) {
+    //     evt.preventDefault()
+    //     evt.stopPropagation()
+    // }
+    // form.classList.add('was-validated')
+    evt.preventDefault();
+    let formSerialized = serializeJSON(form);
+    let fileCV = obtenerCV();
+    if(!noValidateFlag){
+        postData('work-with-us', formatearJsonWithFile(formSerialized,fileCV))
+            .then(response => {
+                if(response.status==200 || response.status==302){
+                    location.replace(response.url);
+                }else{
+                    
+                    errorDispatcher(response.text().then(value => console.log(value)));
+                    
+                }
+            },(reason)=>{
+                errorDispatcher(reason);
+            });
+        }
+    noValidateFlag = false
+} );
+
+function errorDispatcher(reason){
+    const errorSection = document.querySelector("#errorSection")
+    errorSection.innerHTML = `
+    <div  class="alert alert-warning alert-dismissible fade show " role="alert">
+        <strong>Ha ocurrido un error</strong>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>`;
+    console.log(reason)
+    errorSection.focus()
+}
+
+//evento para cambio de ciudad segun departamento
+depSelect.addEventListener("change",evt => listarCiudades(evt.target.value))
+
diff --git a/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp b/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
index a411b61..dc0e7ba 100644
--- a/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
@@ -15,6 +15,11 @@
   </head>
 
   <body class="container">
+    <div class="row">
+      <div id="errorSection" class="col" tabindex="-1">
+
+      </div>
+    </div>
     <form name="postulante" method="post" class="needs-validation" novalidate>
                       <div class="container mt-3">
                           <div class="card p-3 text-center">
@@ -23,38 +28,25 @@
                               </div>
                               <h4>Curriculum</h4>
                               <div class="row">
-                                  <div class="about-inputs  mb-3 col-md-12 center">
-                                    <label for="resumen" class="form-label">Resumen</label>
-                                    <textarea  class="form-control center  " name="resumen" id="resumen" required > </textarea>
-                                    <div class="valid-feedback">
-                                      Luce Bien!
-                                    </div>
-                                    
-                                  </div>
+                                  
 
                                   <div class="inputs mb-3 col-md-6">
                                     <label for="nombre" class="form-label">Nombre</label>
                                     <input type="text" name="nombre" class="form-control  " id="nombre" required>
-                                    <div class="valid-feedback">
-                                      Luce Bien!
-                                    </div>
+                                    
                                   </div>
                                   
                                   <div class="inputs mb-3 col-md-6">
                                     <label for="apellido" class="form-label">Apellido</label>
                                     <input type="text" name="apellido" class="form-control  " id="apellido" required>
-                                    <div class="valid-feedback">
-                                      Luce Bien!
-                                    </div>
+                                    
                                   </div>
           
 
                                   <div class="inputs mb-3 col-md-6">
                                     <label for="correo" class="form-label">Email address</label>
                                     <input type="email" name="correo" class="form-control  " id="correo" required>
-                                    <div class="valid-feedback">
-                                      Luce Bien!
-                                    </div>
+                                    
                                   </div>
 
                                   <div class="inputs mb-3 col-md-6"> 
@@ -68,7 +60,7 @@
 
                                   <div class="inputs mb-3 col-md-6"> 
                                     <label for="tipoDocumento" class="form-label"> Tipo de documento</label> 
-                                    <select name="tipoDocumento" id="tipoDocumento" class="bg-light" required onchange='carg(this.value);'>
+                                    <select name="tipoDocumento" id="tipoDocumento" class="bg-light" required>
                                         <option value='CI' selected>C.I</option>
                                         <option value='PAS'>Pasport</option>
                                         <option value='Otro'>Otro</option>
@@ -78,9 +70,7 @@
                                   <div class="inputs  mb-3 col-md-6">
                                     <label for="nroDocument" class="form-label">Numero de Documento</label>
                                     <input type="number" name="nroDocument" class="form-control  " id="nroDocument" required>
-                                    <div class="valid-feedback">
-                                      Luce Bien!
-                                    </div>
+                                    
                                   </div>
                                   
                                   <div class="inputs mb-3 col-md-6"> 
@@ -103,21 +93,24 @@
                                   <div class="inputs mb-3 col-md-6">
                                     <label for="telefono" class="form-label">Telefono</label>
                                     <input type="number" name="telefono" class="form-control  " id="telefono" required>
-                                    <div class="valid-feedback">
-                                      Luce Bien!
-                                    </div>
+                                    
                                   </div>
 
                                   <div class="inputs mb-3 col-md-6">
                                     <label for="fechaNacimiento" class="form-label">Fecha de nacimiento</label>
                                     <input type="date" name="fechaNacimiento" class="form-control  " id="fechaNacimiento" required>
-                                    <div class="valid-feedback">
-                                      Luce Bien!
-                                    </div>
+                                    
+                                  </div>
+
+                                  <div class="about-inputs  mb-3 col-md-12 center">
+                                    <label for="resumen" class="form-label">Resumen</label>
+                                    <textarea  class="form-control center  " name="resumen" id="resumen" required > </textarea>
+                                    
+                                    
                                   </div>
                               
                         
-                                  <div class="inputs mb-3 col-md-4"> <label for="nivelIngles" class="form-label"> Nivel de ingles</label> 
+                                  <div class="inputs mb-3 col-md-3"> <label for="nivelIngles" class="form-label"> Nivel de ingles</label> 
                                     <select name="nivelIngles" id="nivelIngles" class="content-select">
                                     <option value="1" selected>Ingles muy basico</option>
                                     <option value="2" >Comprendo algunas cosas y puedo leer con la ayuda del traductor</option>
@@ -127,7 +120,7 @@
                                     </select> 
                                   </div>
                                 
-                                  <div class="inputs mb-3 col-md-4"> 
+                                  <div class="inputs mb-3 col-md-3"> 
                                     <label for="disponibilidad" class="form-label"> Disponibilidad</label> 
                                     <select name="disponibilidad" id="disponibilidad" class="content-select">
                                       <c:forEach items="${disponibilidades}" var="disponibilidad">
@@ -136,7 +129,7 @@
                                     
                                   </select> </div>
                                 
-                                  <div class="inputs mb-3 col-md-4"> 
+                                  <div class="inputs mb-3 col-md-3"> 
                                     <label for="estadoCivil" class="form-label"> Estado Civil</label> 
                                     <select name="estadoCivil" id="estadoCivil" class="content-select">
                                       <c:forEach items="${estadosCiviles}" var="estadoCivil">
@@ -144,28 +137,28 @@
                                       </c:forEach>
                                     </select> 
                                   </div>
-                                  <div class="inputs mb-3 col-md-4">
+                                  <div class="inputs mb-3 col-md-3">
                                     <label for="formFile" class="form-label">Cargar cv</label>
                                     <input class="form-control" type="file" id="cvFile">
                                   </div>
                                   <!-- Button Agregar Cargo al que postulas -->
-                                  <button type="button" class="btn btn-primary"><span class="add-experience" class="btn btn-primary" data-toggle="modal" data-target="#cargoForm"><i  class="fa fa-plus"></i>&nbsp;Agregar Cargo al que postulas</span></button><br>
+                                  <button type="button" class="btn btn-primary"><span class="add-experience" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#cargoForm"><i  class="fa fa-plus"></i>&nbsp;Agregar Cargo al que postulas</span></button><br>
                                   <p id="no-valid-cargo" style="display: none; color: darkred; border: solid 1px darkred; border-radius: 25px; width: 75%" class="m-3">
                                     *Agrega por lo menos un cargo
                                   </p>   
                                   <div class="mt-3 gap-2 row row-cols-4" style="display: flex;" id="cargos"></div>
 
                                   <!-- Button Agregar Experiencia -->
-                                  <button type="button" class="btn btn-primary"><span class="add-experience"  data-toggle="modal" data-target="#experienciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Experiencia</span></button><br>   
+                                  <button type="button" class="btn btn-primary mt-2"><span class="add-experience"  data-bs-toggle="modal" data-bs-target="#experienciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Experiencia</span></button><br>   
                                   <div class="mt-3 gap-2 row row-cols-4" id="experiencias"></div>
                                     
                                   <!-- Button Agregar Estudio -->
-                                  <button type="button" class="btn btn-primary"><span class="add-experience"  data-toggle="modal" data-target="#estudioForm"><i class="fa fa-plus"></i>&nbsp;Agregar Estudio</span></button><br>   
+                                  <button type="button" class="btn btn-primary mt-2"><span class="add-experience"  data-bs-toggle="modal" data-bs-target="#estudioForm"><i class="fa fa-plus"></i>&nbsp;Agregar Estudio</span></button><br>   
                                   <div class="mt-3 gap-2 row row-cols-4" id="estudios"></div>
                             
                                
                                   <!-- Button Agregar Tecnologia -->
-                                  <button type="button" class="btn btn-primary"><span class="add-experience"  data-toggle="modal" data-target="#tecnologiaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Tecnologia</span></button><br>
+                                  <button type="button" class="btn btn-primary mt-2"><span class="add-experience"  data-bs-toggle="modal" data-bs-target="#tecnologiaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Tecnologia</span></button><br>
                                   
                                   <p id="no-valid-tecno" style="display: none; color: darkred; border: solid 1px darkred; border-radius: 25px; width: 75%" class="m-3">
                                     *Agrega por lo menos una tecnologia
@@ -174,13 +167,13 @@
                                   </div>
 
                                   <!-- Button Agregar Refencia personal -->
-                                  <button type="button" class="btn btn-primary"><span class="add-experience"  data-toggle="modal" data-target="#referenciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Referencia Personal</span></button><br>   
+                                  <button type="button" class="btn btn-primary mt-2"><span class="add-experience"  data-bs-toggle="modal" data-bs-target="#referenciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Referencia Personal</span></button><br>   
                                   <div class="mt-3 gap-2 row row-cols-4" id="referencia"></div>
                       
                         
                                 
                                 <div class="mt-3 gap-2 d-flex justify-content-end">
-                                  <a class="px-3 btn btn-sm btn-outline-primary" href="/postulante">Cancelar</a>
+                                  <a class="px-3 btn btn-sm btn-outline-primary" href="/work-with-us">Cancelar</a>
                                   <button class="px-3 btn btn-sm btn-primary" type="submit">Guardar</button>
                                 </div>
                               </div>
@@ -188,12 +181,12 @@
                       </div>
     </form>
     <!---------------------------------------Modal de Cargos disponibles---------------------------------------------------------------->
-    <div class="modal fade" id="cargoForm" tabindex="-2" role="dialog" aria-labelledby="cargoForm" aria-hidden="true">
+    <div class="modal fade" id="cargoForm" tabindex="-1" role="dialog" aria-labelledby="cargoForm" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="exampleModalLabel" >CargosDisponibles</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
@@ -202,7 +195,7 @@
               <label for="cargo-nombre" class="form-label">Cargo</label>
               <div class="input-group mb-3">
                 <select class="form-select" name="cargo-id" aria-label="Default select example" required>
-                  <option value="-1" selected>Open this select menu</option>
+                  
                   <c:forEach items="${CargosDisponibles}" var="convocatoria">
                                 <option value="${convocatoria.getId()}">${convocatoria.getCargo().getNombre()}</option>
                   </c:forEach>>
@@ -211,8 +204,8 @@
             </form>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          <button type="button" class="btn btn-primary" onclick="agregarFieldCargo()" data-dismiss="modal">Agregar</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
+          <button type="button" class="btn btn-primary" onclick="agregarFieldCargo()">Agregar</button>
         </div>
       </div>
     </div>
@@ -225,7 +218,7 @@
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title" id="exampleModalLabel">Experiencia</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
               </button>
             </div>
@@ -288,19 +281,19 @@
                 </form>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-              <button id="agregar-exp" type="button" class="btn btn-primary" onclick="agregarFieldExpierncia()" data-dismiss="modal">Agregar</button>
+              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
+              <button id="agregar-exp" type="button" class="btn btn-primary" onclick="agregarFieldExpierncia()">Agregar</button>
             </div>
           </div>
         </div>
       </div>
     <!--------------------------------------------------------------------------------------->
-      <div class="modal fade" id="tecnologiaForm" tabindex="-2" role="dialog" aria-labelledby="tecnologiaForm" aria-hidden="true">
+      <div class="modal fade" id="tecnologiaForm" tabindex="-1" role="dialog" aria-labelledby="tecnologiaForm" aria-hidden="true">
         <div class="modal-dialog" role="document">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title" id="exampleModalLabel" >tecnologia</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
               </button>
             </div>
@@ -309,7 +302,7 @@
                 <label for="tecnologia-nombre" class="form-label">Tecnologia</label>
                 <div class="input-group mb-3">
                   <select class="form-select" name="tecnologia-id" aria-label="Default select example" required>
-                    <option value="-1" selected>Open this select menu</option>
+                    
                     <c:forEach items="${tecnologias}" var="tecnologia">
                       <option value="${tecnologia.id}">${tecnologia.nombre}</option>
                     </c:forEach>
@@ -323,8 +316,8 @@
               </form>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-            <button type="button" class="btn btn-primary" onclick="agregarFieldTecnologia()" data-dismiss="modal">Agregar</button>
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
+            <button type="button" class="btn btn-primary" onclick="agregarFieldTecnologia()">Agregar</button>
           </div>
         </div>
       </div>
@@ -338,7 +331,7 @@
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title" id="exampleModalLabel">Estudios</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
               </button>
             </div>
@@ -349,7 +342,7 @@
                 <div class="form-group">
                     <label for="tipoDeEstudio">Tipo de Estudio</label>
                     <select name="tipoDeEstudio" id="tipoDeEstudio" required>
-                        <option value="-1" selected disabled hidden>Seleccionar</option>
+                        
                         <c:forEach items="${tiposDeEstudio}" var="tipo">
                             <option value="${tipo}">${tipo.name}</option>
                         </c:forEach>
@@ -368,7 +361,7 @@
                   <div class="form-group">
                       <label for="estado">Estado</label>
                       <select name="estado" id="estado" required>
-                          <option value="-1" selected disabled hidden>Seleccionar</option>
+                          
                           <c:forEach items="${estadosEstudio}" var="estado">
                               <option value="${estado}">${estado.name}</option>
                           </c:forEach>
@@ -377,18 +370,24 @@
                 <div class="form-group">
                     <label for="fechaDesdeEstudio" class="form-label">Fecha Desde</label>
                     <input type="date" class="form-control  " name="fechaDesde" id="fechaDesdeEstudio" required>
+                    <div class="invalid-feedback errorFechaDesde">
+                              
+                    </div>
                 </div>
                 <div class="form-group">
                     <label for="fechaHastaEstudio" class="form-label">Fecha Hasta</label>
                     <input type="date" class="form-control  " name="fechaHasta" id="fechaHastaEstudio" >
+                    <div class="invalid-feedback errorFechaHasta">
+                              
+                    </div>
                 </div>
 
 
             </form>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
-          <button type="button" class="btn btn-primary" onclick="agregarFieldEstudio()" data-dismiss="modal">Agregar</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
+          <button type="button" class="btn btn-primary" onclick="agregarFieldEstudio()">Agregar</button>
         </div>
       </div>
     </div>
@@ -401,7 +400,7 @@
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title" id="exampleModalLabel">Referencias Personales</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
               </button>
             </div>
@@ -427,8 +426,8 @@
             </form>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
-          <button type="button" class="btn btn-primary" onclick="agregarFieldReferencia()" data-dismiss="modal">Agregar</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
+          <button type="button" class="btn btn-primary" onclick="agregarFieldReferencia()">Agregar</button>
         </div>
       </div>
     </div>
@@ -436,49 +435,11 @@
 
 
     <!-- Optional JavaScript; choose one of the two! -->
-
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
     <script>
       var ciudades = ${ciudades};
-      (function(){
-          var today = new Date();
-          var dd = today.getDate();
-          var mm = today.getMonth() + 1; //January is 0!
-          var yyyy = today.getFullYear();
-
-          if (dd < 10) {
-              dd = '0' + dd;
-          }
-
-          if (mm < 10) {
-              mm = '0' + mm;
-          }
-
-          today = yyyy + '-' + mm + '-' + dd;
-
-
-          let fechaDesdeEstudio = document.querySelector("#fechaDesdeEstudio");
-          let fechaDesdeExperiencia = document.querySelector("#fechaDesdeExperiencia");
-          let fechaHastaEstudio = document.querySelector("#fechaHastaEstudio");
-          let fechaHastaExperiencia = document.querySelector("#fechaHastaExperiencia");
-          let fechaNacimiento = document.querySelector("#fechaNacimiento");
-          let fechas = [fechaDesdeEstudio,fechaDesdeExperiencia,fechaHastaEstudio,fechaHastaExperiencia,fechaNacimiento]
-          fechas.forEach(fch => fch.addEventListener('keydown',()=>false))//no dejar cargar manualmente fechas
-
-          fechaDesdeEstudio.setAttribute("max", today);
-          fechaDesdeExperiencia.setAttribute("max", today);
-          fechaNacimiento.setAttribute("max", today);
-
-          fechaDesdeExperiencia.addEventListener("change", ()=>{
-              fechaHastaExperiencia.setAttribute("min", fechaDesdeExperiencia.value)
-          })
-          fechaDesdeEstudio.addEventListener("change", ()=>{
-              fechaHastaEstudio.setAttribute("min", fechaDesdeEstudio.value)
-          })
-      })()
-    </script>
+          </script>
     <script src="./main.js"></script>
   </body>
 </html>
\ No newline at end of file