Tenia pensado hacer un registro, por pasos, que tuviera 3, todos estos pasos están en un mismo <form>
.
He acabado finalmente mi validador de formulario, que esta funcional tal y como yo quería, ahora se me presenta otro problema, y es que al hacer click al botón de submit, aún así dejando los campos vácios, el registro hace fadeOut( cosa que no debería hacer, a no ser que todos los campos tengan valor, y estén validados usando las funciones que he creado)
$(function() {
var error_username = false;
var error_password = false;
var error_password_confirm = false;
var error_email = false;
$("#username").focusout(function() {
check_username();
});
$("#password").focusout(function() {
check_password();
});
$("#password-confirm").focusout(function() {
check_password_confirm();
});
$("#email").focusout(function() {
check_email();
});
function check_username() {
var username_length = $("#username").val().length;
if (username_length < 3 || username_length > 20) {
$("input#username").addClass("invalid");
error_username = true;
} else {
$("input#username").removeClass("invalid");
}
}
function check_password() {
var password_length = $("#password").val().length;
if (password_length < 6) {
$("input#password").addClass("invalid");
error_password = true;
} else {
$("input#password").removeClass("invalid");
}
}
function check_password_confirm() {
var password_confirm_length = $("#password-confirm").val().length;
var password = $("#password").val();
var password_confirm = $("#password-confirm").val();
//if (password_confirm_length < 6)
//{
// $("input#password-confirm").addClass("invalid");
// error_password_confirm = true;
//}
if (password != password_confirm) {
$("input#password-confirm").addClass("invalid");
$("input#password").addClass("invalid");
// msg.... (password doesn't match)
error_password_confirm = true;
} else {
$("input#password-confirm").removeClass("invalid");
$("input#password").removeClass("invalid");
}
}
function check_email() {
var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
if (pattern.test($("#email").val())) {
$("input#email").removeClass("invalid");
} else {
$("input#email").addClass("invalid");
error_email = true;
}
}
// Aquí deriva el problema que no hace submit correctamente
$("#submitir").click(function() {
event.preventDefault();
var error_username = false;
var error_password = false;
var error_password_confirm = false;
var error_email = false;
check_username();
check_password();
check_password_confirm();
check_email();
if (error_username == false && error_password == false && error_password_confirm == false && error_email == false) {
$("div.primer-step").fadeOut(550, function() {
$("div.segundo-step").fadeIn(550);
});
} else {
return false;
}
});
});
<html>
<div class="primer-step">
<center>
<h1>Crear Cuenta</h1>
</center>
<form id="register-form" action="" method="post">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username"><span class="error-form" id="username-error-message"></span>
<label for="username">Contraseña:</label>
<input type="password" id="password">
<br><br>
<label for="username">Confirma contraseña :</label>
<input type="password" id="password-confirm">
<label for="email">Email:</label>
<input type="email" id="email">
<br><br><br>
<center><input type="submit" value="avanzar a paso 2" id="submitir"></center>
</form>
</div>
<div class="segundo-step" style="display:none;">
<h1>Validator completado! :D</h1>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</html>
La verdad que no se por que debe estar petando, ya que a primera vista todo está bien, además esta todo testeado, no debería dejar pasar, si no están los campos validados, en la función de submit, si no valida correctamente, hace un "return false", quizá sea eso que este fallando, lo que yo pretendo con eso es que no deje pasar, simplemente.
Mi formulario, el original tiene muchísimas más líneas, y el controlador más de lo mismo, con lo cual ya está todo programado por la parte back-end con sus modelos, con lo cual hacer más formularios no me sería factible para nada, lo único que me falla es esto.
Gracias y un saludo.
<center>
ha quedado en desuso desde HTML 4