CODEWITHSUNDEEP
javascriptjqueryregexhtmlforms
Alejandro Paredes
Alejandro Paredes

Reputation: 121

IF/ELSE on Javascript works strangely

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;
    }
}

Upvotes: 0

Views: 87

Answers (2)

CertainPerformance
CertainPerformance

Reputation: 370949

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)

Upvotes: 2

Ramires Nascimento
Ramires Nascimento

Reputation: 243

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)    
}

Upvotes: 1

Related Questions