Validate html form with JS onsubmit

Question

I have a form with an option element on top and an email field.

<form class="form-versenden" action="mainVersendet.php" method="post" name="send">
    <div class="form-group">
        <h4>Bitte tragen Sie die folgenden Daten ein</h4>
        <div class="form-group">
            <label for="versandart">Versandart</label>
            <select class="form-control" id="versandart" name="versandart" autofocus>
                <option value="both">E-Mail und Druck</option>
                <option value="onlyEmail">Nur E-Mail</option>
                <option value="onlyPrint">Nur Druck</option>
            </select>
        </div>
        <div class="form-group">
            <label for="email">E-Mail</label>
            <input type="email" class="form-control" id="email" placeholder="email" name="email">
        </div>
        <button class="btn" type="submit">Versenden</button>
    </div>
</form>

Depending on what the user chooses, I have to check if an email address is entered in the case 'both' and 'onlyEmail'. Because email is not required in all 3 cases I can't use the required element of HTML for the email field. So I tried to test it on the submit event like this:

 document.querySelector('form[name="send"]').addEventListener("submit", validateFields);

function validateFields(){
    var versandart = document.getElementById("versandart");
    var email = document.getElementById("email");     

    if (versandart.value == 'both' || versandart.value == 'onlyEmail'){
        if(email.value == ''){
            email.setCustomValidity('EMail muss eingegeben werden');
            return false;
        }else if(CHECK HERE if Mail is not correct){
            email.setCustomValidity('EMail format is not correct');
            return false;
        }else{
            //in this case email is not empthy and is correct
            return true;
        }
    }
}

But this is not working because I overwrite the standard HTML check for a valid email address. So I have to check it again at the point 'CHECK HERE if Mail is not correct'.

How can I do that and is that the right way? Or should I add an onchangelistener to the versandart field and add the required tag to the email field if the selected value is fitting into the first two cases?

Answer 1

In your else if, use the isEmail() function like this:

else if(email.value.isEmail()) {
    return true;
    // Now the form will get submitted to the PHP script.
}

string.isEmail() returns true if the entered pattern matches an email address, otherwise false.

Please don't forget to do server side form validation, too, though. If a cracker switches JavaScript off, they may cause mayhem in your system if you only have JavaScript validation -- especially as you apparently can't use required HTML attribute for your email input.