Problem
I begin by saying that the regex you are using to validate the email:
/^([\w-\.]+@@([\w-]+\.)+[\w-]{2,4})?$/
You have @ more, so it does not work correctly. Regardless of which logic you have it also does not work:
if (senha === '' && senha_confirma === '' && email === '') {
Here you are saying that if these 3 things happen at the same time then mark these fields in red. Which means that if senha is empty but the confirmation and email are not, it will no longer mark them in red.
What means that next will test the email , even if it can be empty:
...
} else if (!filtro.test(email)) {
And then re-test email with regex, and compare passwords:
} else if (senha === senha_confirma && filtro.test(email)) {
When in fact it is possible that the user had left either senha or senha_confirma empty, it did not enter the first if .
Solution
A solution that takes more or less logic is to test each field separately and mark it with the appropriate color, depending on whether it is right or not. In order to see if everyone is right you also need more logic.
Example:
//variavel para saber se algum não está correto
let erros = false;
if (senha === '' || senha !== confirma_senha) {
$("#user_password").css({
border: '2px solid red'
});
}
else {
$("#user_password").css({
border: '2px solid #70e870'
});
erros = true;
}
//falta aqui a mesma lógica para a confirmacao da senha
//que não coloquei para não ser extenso
if (email === '' || !email.test(filtro)) {
$("#user_email").css({
border: '2px solid red'
});
}
else {
$("#user_email").css({
border: '2px solid #70e870'
});
erros = true;
}
if (erros === false){
//tudo certo
}
In this example, the error variable remembers if any backward field has errors and if it does not register successfully. Although this logic works, and is somewhat similar to yours, it is very repetitive and doubles the code a lot.
To work around this problem we can use arrays by memorizing all the fields to be tested. This facilitates the application of styles in bulk. In order to take advantage of this logic also errors can be stored in an array:
//todos os campos existentes num array
const campos = [$("#user_email"), $("#user_password"), $("#user_confirm_password")];
$("#passo2_cad").click(function() {
email = $("#user_email").val();
filtro = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
senha = $("#user_password").val();
senha_confirma = $("#user_confirm_password").val();
let erros = []; //erros agora é um array para os campos errados
if (senha === '' || senha !== senha_confirma){
erros.push($("#user_password")); //se errado adiciona ao array de erros
}
if (senha_confirma === '' || senha_confirma !== senha){
erros.push($("#user_confirm_password"));
}
if (email === '' || !filtro.test(email)){
erros.push($("#user_email"));
}
//marcar todos os campos a verde
for (let campo of campos){
campo.css({border: '2px solid #70e870'});
}
if (erros.length === 0){
alert("Deu tudo certo!");
}
else { //não deu certo, logo marca os errados a vermelho
for (let campoErrado of erros){
campoErrado.css({border: '2px solid red'});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Email<inputtype="email" id="user_email"><br>
Password <input type="password" id="user_password"><br>
Confirmação <input type="password" id="user_confirm_password"><br>
<input type="submit" value="Cadastrar" id="passo2_cad">
In this scenario, much of the code duplication has been eliminated, making it smaller, easier to maintain, and adding other fields.
As a next step, it will be important to put the information of what went wrong in each step of the validation, so that the user does not get lost trying to find what did not work.
