IF/ELSE on Javascript works strangely

Question

I have a form where I ask for an email that I validate trought a regular expression, if the email is correct, I do a submit, if not I send an alert.

When I put an invalid email the alert is shown, but if I put a valid email the alert is shown and then the submit() is done, I don't even know how is this posible! Here is my code.

$('#sinCopago').on('click', function(event){
    if($('#nombreContratante').val() != "" && $('#motivo').val() != ""){
        if($('#fechaNac').val() > hoy){
            alert("Ingresa una fecha de nacimiento válida.");
        }else{
            if(validarMail($("#correo")) == true){
                event.preventDefault();
                $('#progressBarSisnova').modal({show:true});
                $('#payment-form-Sisnova').submit();
            }
            else{
                alert("Ingresa un correo válido");
            }
        }
    }
    else{
        alert("Por favor llene todos los campos");
    }
});

function validarMail(email){
    var caract = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/;

    if(caract.test(email) == false){
        return false;
    }
    else{
        return true;
    }
}

Handling the click will not prevent the form submission, unless you either a) add `event.preventDefault();` to your function or b) return false from it. — , Nov 30 '18 at 00:30
Offtopic, but dude, try to keep a pattern. At some places you have the `else` on the same line as the closing brackets from if, other places you break line. It makes your code hard to read — iagowp, Nov 30 '18 at 00:31
Your regular expression is too restrictive. See [this answer about validating email addresses](https://stackoverflow.com/a/201378/361684). Personally, I prefer to check for `.@.`, followed by a DNS request for an MX record at the specified domain. If both of those pass, I assume the address is good. — gilly3, Nov 30 '18 at 00:42

CertainPerformance · Accepted Answer · 2018-11-30T00:36:48.060

You're currently passing the $("#correo") jQuery object to validarMail:

if(validarMail($("#correo")) == true){

and proceed to test that object:

if(caract.test(email) == false){

Which won't work, of course, because you're not testing a string. Try passing the .val() of #correo instead. so that the eventual .test( is called with the value string, not the jQuery object:

if(validarMail($("#correo").val()) == true){

Feel free to remove the == true part, validarMail already returns a boolean:

if(validarMail($("#correo").val())){

You should also preventDefault when the test fails, not when the test succeeds - that way, the form will be submitted as normal without interruption only when the test succeeds. The code will also probably be flatter and easier to read if you return when there's an error:

$('#sinCopago').on('click', function(event){
  if($('#nombreContratante').val() === "" || $('#motivo').val() === "") {
    event.preventDefault();
    return alert("Por favor llene todos los campos");
  }
  if($('#fechaNac').val() <= hoy){
    event.preventDefault();
    return alert("Ingresa una fecha de nacimiento válida.");
  }
  if(!validarMail($("#correo").val())){
    event.preventDefault();
    return alert("Ingresa un correo válido");
  }
  $('#progressBarSisnova').modal({show:true});
  $('#payment-form-Sisnova').submit();
});

If clicking #sinCopago submits the form without preventDefault, then there's no need for the final line there $('#payment-form-Sisnova').submit();. (Otherwise, then there may be no need for preventDefault at all, if the event's default action doesn't cause a form submission or other undesirable behavior)

So I guess we can close this as typo? – Nov 30 '18 at 00:35 — , Nov 30 '18 at 00:35

score 1 · Answer 2 · answered Nov 30 '18 at 00:36

you should pass the value of field for function validarMail(), so replace the current cod

if(validarMail($("#correo")) == true)

for

 if(validarMail($("#correo").val()) == true)

an you can improve you function.

function validarMail(email){
    var caract = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/;
    return caract.test(email)    
}

IF/ELSE on Javascript works strangely

2 Answers2