Allow email address with a dot OR hyphen in the domain (HTML)

Question

I created a form using html. I have an email address field in which i'm allowing domains containing a dot. However i can still have domains with a hyphen, a kind of "[email protected]" It's probably an easy edit in my code but i still can't find where and what i should add.

Here is my code :

 <div class="srf-field_wrapper">
                    <label for="emailAddress">E-mail*</label>
                    <input id="emailAddress" name="emailAddress" required="" type="text" placeholder="Ex: [email protected]*" pattern="[a-zA-Z0-9\.]+@[a-zA-Z0-9\.]+\.[a-z]+" oninvalid="setCustomValidity('Veuillez remplir ce champ obligatoire')" oninput="setCustomValidity('')">
                </div>

I know that "." means that we allow a dot in the domain. I want to express the fact that we can have a dot OR a hyphen in the domain.

Does someone can help me ?

Thank you for your help !

Answer 1

[a-zA-Z0-9\.]+@[a-zA-Z0-9]+[\.-]?[a-zA-Z0-9]+\.[a-z]+

What I did is remove the . from the allowed characters, and create two groups of the allowed characters instead of one.

Then I added [\.-]? between them. This makes an OR since 0 or 1 character only is allowed, between the dot and the hiphen.

That means there can be only 1 dot OR hiphen. in the domain.