how to validate email in form

[jasonc]

I just can not seem to find a javascript code that checks if the email format is correct. I know that someone could enter an bogus email address but thats ok. I am just after checking if the format of the email entered looks correct before the form is submitted.
Please can I have some suggestions of what others have used.

It could be that I am doing this wrong...

if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email.value.lrtrim())) {
errorMessage = 'Email contains invalid character/s';

[Strider64]

    const emailIsValid = (email) => {
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    };

    email.addEventListener('change', () => {
        let status = emailIsValid(email.value);
        console.log('Email Address', email.value, 'Status', status);
        if (!status) {
            email.value = "";
            email.placeholder = "Email Address is Invalid!";
            email.style.borderColor = "red";
            email.focus();
        } else {
            email.style.borderColor = myBorder;
            sendEmail.email = email.value;
            sendStatus.email = true;
        }
    });

It's still best to check it server side and HTML5 make it required.

Edited July 3, 2021 by Strider64

[jasonc]

Thank you for this, but how do I add this in to my existing code like above ?

I already have the errormessage added to the top of the field if it is needed.

I already have it checked server side but still could fail when we reply to their message anyway.

[Strider64]

11 minutes ago, jasonc said:

Thank you for this, but how do I add this in to my existing code like above ?

I already have the errormessage added to the top of the field if it is needed.

I already have it checked server side but still could fail when we reply to their message anyway.

Well, I would if the errormessage is the trigger then just wipe out the input value (email.value = "";) for the email, have it required and show the error message. HTML5 won't allow a user to proceed.

 

Maybe?

if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
errorMessage = 'Email contains invalid character/s'; 
email.value = "";
}

Though it really isn't checking totally for invalid characters just the proper format. (That's what I'm concerned about)  I think most people are pretty careful in typing their email address.

Edited July 3, 2021 by Strider64

[jasonc]

I did use the HTML5 but it is not supported on most andriod devices

[Strider64]

4 minutes ago, jasonc said:

I did use the HTML5 but it is not supported on most andriod devices

Hmm? I didn't not know that as I'm a iPhone user. I find it strange that android devices would do that. I think a work around would to check the email.value to see if it's empty?

Edited July 3, 2021 by Strider64

[jasonc]

I would like to cater for all devices/pc.  I just tried the if statement you gave and it allowed

ssss@gg@.gfh

Just checking that the email is looking ok is fine, i.e. no spaces, no strange characters and that. They could still type in thisemaildoesnotexists@gmailfake.com  but then we'd see that when we go to reply !

[maxxd]

8 hours ago, jasonc said:

I did use the HTML5 but it is not supported on most andriod devices

I don't know exactly what you mean by this, but android supports HTML 5 semantic markup.

 

If you want to make sure the email actually exists, I believe there are services that can do this. I've not used one so I can't vouch for the accuracy or operation, but a Google search should return some good places to start.

[jasonc]

I am just after a javascript regex that checks that the format of the email looks like and email not if it exists.

[maxxd]

In that case, Strider64 has given you your answer. Use JavaScript's test method.