Estoy intentando validar un formulario de registro, por un lado con Jquery capturo el botón del formulario y todos los campos para validar que si los campos están vacíos, el formulario no se envíe; para esto hago uso de ** e.preventDefault () **. Pero cuando lleno los campos e intento enviar el formulario, éste no se envía. Mi pregunta es cómo hago para cancelar la acción del preventDefault (), para que una vez, lleno el formulario, se envíen los datos, y por último limpiar el formulario.
También estoy queriendo validar del lado del servidor con PHP, pero no sé como unir ambas validaciones: Jquery y PHP.
Formulario en HTML
<form action="" method="POST" id="formulario">
<!-- nombre-->
<div class="form-group">
<p id="message"></p>
<label for="nombre" class="text-dark">Nombre</label>
<input type="text" name ="nombre" class="form-control" value="" placeholder="Ingresa tu nombre">
<div id="nom">
<!-- <?php //if (isset($error_nombre)) { ?>
<p><?php //echo $error_nombre ?> </p>
// <?php //} ?> -->
</div>
<label for="apellido" class="text-dark">Apellido</label>
<input type="text" name ="apellido" class="form-control" value="" placeholder="Ingresa tu apellido">
<div id="ape">
<!-- <?php //if (isset($error_apellido)) { ?>
<p><?php //echo $error_apellido ?> </p>
<?php //} ?> -->
</div>
<!-- email-->
<label for="email" class="text-dark">Email</label>
<input type="email" name ="email" class="form-control" value=""aria-describedby="emailHelp" placeholder="Ingresa tu email">
<div id="emailReg">
<!-- <?php //if (isset($error_email)) { ?>
<p><?php //echo $error_email ?> </p>
<?php //} ?> -->
</div>
</div>
<!-- password-->
<div class="form-group">
<label for="password" class="text-dark">Contraseña</label>
<input type="password" name="password" class="form-control" value="" placeholder="Ingresa tu contraseña">
<div id="passUsuario">
<!-- <?php //if (isset($error_password)) { ?>
<p><?php //echo $error_password ?> </p>
<?php //} ?> -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="submit" name="submit" class="btn btn-primary" id="btn-registro">Enviar</button>
</div>
</form>
**Código Jquery **
$(document).ready(function(){
$('#btn-registro').on("click", function(e){
let nombre = $("#nombre").val(),
apellido = $("#apellido").val(),
email = $("#email").val(),
password = $("#password").val(),
datosUsuario = `Nombre: ${nombre} , Apellido: ${apellido}, Email: ${email} , Pass: ${password}`;
if(!nombre || !apellido || !email || !password ){
e.preventDefault();
$('#nom').html('<p style="color: red;">El campo nombre es requerido</p>');
$('#ape').html('<p style="color: red;">El campo apellido es requerido</p>');
$('#emailReg').html('<p style="color: red;">El campo email es requerido</p>');
$('#passUsuario').html('<p style="color: red;">El campo contraseña es requerido</p>');
}
});
});