JQuery - How to make one alert with all this if, and validate good format for the mail?

Issue

I would like to know how to do with all "if" conditions to make a single one for my alert()... and how to configure the email to have the right format?

$('#submit').click(function () {
if ($('#email').val() == '') {
    $('#email').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
}
/*else if ($('#email').val()!='/^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;'){
$('#email').css('border','2px solid red');
    alert('Courriel invalide') 
}*/
else {
    $('#email').css('border', '2px solid green')
}
if ($('#nom').val() == '') {
    $('#nom').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
}
else {
    $('#nom').css('border', '2px solid green')
}

if ($('#subject').val() == '') {
    $('#subject').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
}
else {
    $('#subject').css('border', '2px solid green');
}
if ($('#message').val() == '') {
    $('#message').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
}
else {
    $('#message').css('border', '2px solid green');
}

})

Solution

I think something like this (I assume your have a different error message for each feild) :

$('#submit').click(function() {
  let re = /^\w+([-+.'][^\s]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  if ($.trim($('#email').val()) === '') {
    $('#email').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
  } else if (!re.test($('#email').val())) {
    $('#email').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
  } else if ($.trim($('#nom').val()) === '') {
    $('#nom').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
  } else if ($.trim($('#subject').val()) === '') {
    $('#subject').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
  } else if ($.trim($('#message').val()) === '') {
    $('#message').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
  } else {
    $('#message').css('border', '2px solid green');
  }
})

Note this only checks that field is not empty it does not check each field has at least a minimum number of characters, hope it helps

Answered By - Patrick Hume