Validacion en front de postulantes pt1

parent 101a8e0f
......@@ -5,6 +5,7 @@ import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import javax.validation.ConstraintViolationException;
import javax.validation.Valid;
import com.roshka.modelo.Experiencia;
import com.roshka.modelo.Postulante;
......@@ -14,6 +15,7 @@ import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.MethodArgumentNotValidException;
import org.springframework.web.bind.annotation.*;
......
......@@ -4,13 +4,51 @@ let cont_tecnologia = 0;
const experiencias = [];
const estudios = [];
const tecnologias = [];
function agregarFieldExpierncia(){
const formValidator = function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
var expForm = document.querySelector('#agregar-exp')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
}
function agregarFieldExpierncia(event){
//recoger del form
const pairs = {};
const formexp = document.querySelector("[name=experiencia-form]");
const formData = new FormData(formexp);
const reconocimientos = [{},{},{}];
let pos_rec;
let returnFlag = false;
formData.forEach((value, key)=>{
if((key === "institucion" || key === "cargo" || key === "fechaDesde")
&& value==="" && returnFlag == false){
console.log(key, value)
returnFlag = true;
}
});
if(returnFlag===true){
alert("Rellene Institucion, Fechas y Cargo como minimo");
return;
}
for (const [name, value] of formData){
pos_rec = name.split("-");//rec-nombre-index
if (pos_rec.length > 1) {
......@@ -45,7 +83,6 @@ function agregarFieldExpierncia(){
div.innerHTML = '';
div.appendChild(div1);
cont_experiencia++;
}
function eliminarExperiencia(event) {
......@@ -90,10 +127,14 @@ async function postData(url = '', data = {}) {
});
return response; // parses JSON response into native JavaScript objects
}
formValidator()
form = document.querySelector("form");
form.addEventListener("submit",(evt)=>{
// if (!form.checkValidity()) {
// evt.preventDefault()
// evt.stopPropagation()
// }
// form.classList.add('was-validated')
postData('postulante', serializeJSON(form))
.then(response => {
if(response.status==200 || response.status==302){
......
......@@ -13,47 +13,74 @@
<body class="container">
<h1>Curriculum</h1>
<form name="postulante" method="post">
<form name="postulante" method="post" class="row g-3 needs-validation" novalidate>
<div class="mb-3 col-5">
<label for="correo" class="form-label">Email address</label>
<input type="email" name="correo" class="form-control " id="correo" >
<input type="email" name="correo" class="form-control " id="correo" required>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="mb-3 col-5">
<label for="nombre" class="form-label">Nombre</label>
<input type="text" name="nombre" class="form-control " id="nombre" >
<input type="text" name="nombre" class="form-control" id="nombre" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="mb-3 col-5">
<label for="apellido" class="form-label">Apellido</label>
<input type="text" name="apellido" class="form-control " id="apellido" >
<input type="text" name="apellido" class="form-control " id="apellido" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="mb-3 col-3">
<label for="ci" class="form-label">Cedula de identidad</label>
<input type="number" name="ci" class="form-control " id="ci" >
<input type="number" name="ci" class="form-control " id="ci" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="mb-3 col-5">
<label for="ciudad" class="form-label">Ciudad</label>
<input type="text" name="ciudad" class="form-control " id="ciudad" >
<input type="text" name="ciudad" class="form-control " id="ciudad" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="mb-3 col-5">
<label for="telefono" class="form-label">Telefono</label>
<input type="number" name="telefono" class="form-control " id="telefono" >
<input type="number" name="telefono" class="form-control " id="telefono" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="mb-3 col-5">
<label for="fechaNacimiento" class="form-label">Fecha de nacimiento</label>
<input type="date" name="fechaNacimiento" class="form-control " id="fechaNacimiento" >
<input type="date" min="1910-01-01" name="fechaNacimiento" class="form-control " id="fechaNacimiento" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="mb-3 col-5">
<label for="resumen" class="form-label">Resumen</label>
<textarea class="form-control " name="resumen" id="resumen" > </textarea>
<textarea class="form-control " name="resumen" id="resumen" required> </textarea>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="mb-3 col-5">
<label for="nivelIngles" class="form-label">Nivel de ingles</label>
<input type="number" class="form-control" name="nivelIngles" id="nivelIngles" >
<input type="number" class="form-control" name="nivelIngles" id="nivelIngles" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="mb-3 col-5">
<label for="curriculum" class="form-label">Curriculum</label>
......@@ -61,11 +88,17 @@
</div>
<div class="mb-3 col-5">
<label for="disponibilidad" class="form-label">Disponibilidad</label>
<input type="text" class="form-control " name="disponibilidad" id="disponibilidad" >
<input type="text" class="form-control " name="disponibilidad" id="disponibilidad" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="mb-3 col-5">
<label for="modalidad" class="form-label">Modalidad</label>
<input type="text" class="form-control " name="modalidad" id="modalidad" >
<input type="text" class="form-control " name="modalidad" id="modalidad" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
......@@ -91,15 +124,20 @@
<div class="modal-body">
<form name="experiencia-form">
<label for="institucion" class="form-label">Institucion</label>
<input type="text" class="form-control " name="institucion" id="institucion" >
<input type="text" class="form-control " name="institucion" id="institucion" required>
<label for="fechaDesde" class="form-label">FechaDesde</label>
<input type="date" class="form-control " name="fechaDesde" id="fechaDesde" >
<input type="date" min="1960-01-01" class="form-control " name="fechaDesde" id="fechaDesde" required>
<label for="fechaHasta" class="form-label">Fecha Hasta</label>
<input type="date" class="form-control " name="fechaHasta" id="fechaHasta" >
<label for="cargo" class="form-label">Cargo</label>
<input type="text" class="form-control " name="cargo" id="cargo" >
<input type="text" class="form-control " name="cargo" id="cargo" required>
<label for="refNombre" class="form-label">Referencia Nombre</label>
<input type="text" class="form-control " name="referencias" id="refNombre" >
<label class="form-label">Reconocimientos</label>
<div class="row mb-3">
<div class="col">
......@@ -129,7 +167,7 @@
</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="agregarFieldExpierncia()" data-dismiss="modal">Agregar</button>
<button id="agregar-exp" type="button" class="btn btn-primary" onclick="agregarFieldExpierncia()" data-dismiss="modal">Agregar</button>
</div>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment