No me ejecuta el POST

[fedefrankk]

Hola a todos, tengo un pequeño código de validación de formulario, anda bien al validar, pero una vez validado no me redirige al POST.

dejo mi código.


HTML

Código HTML:

<form action="PrimerPost.php" method="POST"  id="form">
<div class="container fondo">
<div class="row">
<div class="mb-3 fondo">
 
  <label  class="form-label"><b>Nombre Completo</b></label>
  <input type="tetx" class="form-control" id="name" name="cl_NomCompleto"  placeholder="Nombre Completo">
</div>
 
<div class="mb-3">
  <label  class="form-label"><b>DNI</b></label>
  <input type="text" class="form-control" id="cldne" name="cl_DnIE" placeholder="Su DNI">
</div>
<br>
 
<br>
</div>
 
<button type="submit" type="button" class="btn btn-success">Seguir</button>
<p class="warnings" id="warnings"></p>
</form>
<br>
<script src="index.js"></script>
 

Código javascript

Código Javascript:

const nombre = document.getElementById("name")
const cldne = document.getElementById("cldne")
const form = document.getElementById("form")
const parrafo =document.getElementById("warnings")
 
    form.addEventListener("submit", e=>{
        e.preventDefault()
        let warnings =""
        parrafo.innerHTML=""
        if(nombre.value.length <4){
           
            warnings +=`El nombre es muy corto <br>`
            entrar= true
        }
 
        if(cldne.value.length<8){
            warnings +=`El nombre es muy corto <br>`
            entrar= true
        }
        if(entrar){
            parrafo.innerHTML= warnings
        }else{
        
            this.submit();
    
        }
     
    })
 

Gracias por su tiempo.
Saludos a todos.!!

[prueba230683]

Tienes dos errores bastante sutiles, sobre todo el segundo.

1) La variable entrar no la estás declarando en ningún lugar. Debes declarar la variable entrar localmente (es decir, dentro de la función) e iniciarla a false. De esta forma, cada vez que se dispare el evento submit del formulario, la variable comenzará en false y cambiará a true si se cumple alguna de esas dos condiciones.

2) Las Arrow Functions de ES6 no son solamente una abreviación de las funciones normales, tienen algunas peculiaridades más, como por ejemplo, utilizan el this léxico. Aquí hay una explicación a fondo. La solución es usar funciones normales en este caso.

El código corregido resulta:

Código Javascript:

const nombre = document.getElementById("name")
const cldne = document.getElementById("cldne")
const form = document.getElementById("form")
const parrafo = document.getElementById("warnings")
 
form.addEventListener("submit", function(e){
  var entrar = false; // declarar e inicializar variable
 
  e.preventDefault()
  let warnings = ""
  parrafo.innerHTML = ""
  if(nombre.value.length < 4){
 
    warnings +=`El nombre es muy corto <br>`
    entrar= true
  }
 
  if(cldne.value.length < 8){
    warnings +=`El nombre es muy corto <br>`
    entrar= true
  }
  if(entrar){
    parrafo.innerHTML= warnings
  }else{
    this.submit();
  }
 
})
 

[fedefrankk]

Hola Muchas gracias.!!! por tu solución, realmente muy bueno anda de 10.!!
se agradece tu tiempo de explicarme.
Muchas gracias.

Saludos cordiales