I had planned to make a record, by steps, that I had 3, all these steps are in one <form>.
I have finally finished my form validator, which is functional as I wanted , now I have another problem, and that is that when I click on the submit button, still leaving the fields empty, the registration makes fadeOut (something that does not should do, unless all fields have value, and are validated using the functions I created)
Attached html code:
<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>
JQUERY CODE:
$(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;
}
});
});
The truth is that I don't know why it should be peeling, since at first sight everything is fine, besides everything is tested, I should not let pass, if the fields are not validated, in the submit function, if it does not validate correctly, it makes a "return false", perhaps it is that which is failing, what I intend with that is that it does not simply pass.
My form, the original has many more lines, and the controller more of the same, with which everything is already programmed by the back-end part with its models, which making more forms would not be feasible for me at all, the only What fails me is this.
Thanks and best regards.
Aucun commentaire:
Enregistrer un commentaire