HTML - How to not allow instroducing an email without ".com"

Question

in my form I have an input box of type email, like this:

<input class="form-control" id="Empresa_Email" name="Empresa_Email" type="email" maxlength = "50" placeholder="xxxx@yyyy">

If I don't put any '@' it considers that the email is not valid and sends an error messagem. Although, I want to also send an error message if i don't introduce an ending statement like ".com" or ".pt", because that's not valid either. How can i achieve this?

The `type="email"` already disallows multiple `@` symbols in conforming browsers. See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#Basic_validation). Where are you seeing an issue with it? Tangentially, you should remove the maximum length. Email addresses can absolutely be longer than 50 characters. — tremby, Feb 02 '18 at 23:50
You are right -.- I don't know what was happening, i had some kind of bug that this wasn't verifying the errors, at all. I redo the code and all it's working fine. You want to write an answer so i can accept it? — cesarPR, Feb 03 '18 at 00:01
@cesarPR It actually depends on your `Server-Side Language` If you're using one, It would make your question make sense, Since `Client-Side` isn't safe at all. — Toleo, Feb 03 '18 at 00:02
The question i made was stupid, type email already disallows multiple @, although i changed my question a bit different, this time, html doesn't take care of the issue. Can you see my update? — cesarPR, Feb 03 '18 at 00:07

Alvaro Alday · Answer 1 · 2018-02-03T00:11:53.000

0

If you don't want to use an email value type. You would need to use javascript to check if the text of your input has 2 or more "@" characters. This question might help you a little bit. detecting mistyped email addresses in javascript It would be something like this:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<input type="button" onclick="atcounter('as@at@.com')">
</body>
<script type="text/javascript">
  function atcounter(a) {
    // get values
    var m = a.length;
    var flag=0;
    for (var i = 0; i < m; i++) {
        if (a[i]='@') {
          flag++;
        }
    }

    if (flag>1) {
      alert('you spelled more than one "@"')
    }
}
</script>
</html>

edited Feb 03 '18 at 00:11

answered Feb 02 '18 at 23:52

Alvaro Alday

343
3
19

Why would you not want to use `email` type? Nothing in the question says OP doesn't want to. – tremby Feb 02 '18 at 23:53
As somebody stated above the e-mail input type already detects multiple "@" characters. – Alvaro Alday Feb 02 '18 at 23:56
Yes, that was me. But that doesn't answer my question. – tremby Feb 02 '18 at 23:56
I just assume that since he is already using the email input type, that is somehow not enough for him. – Alvaro Alday Feb 03 '18 at 00:13

tremby · Accepted Answer · 2018-02-03T00:12:27.823

0

<input type="email"> already validates that the value doesn't contain more than one @, among other things.

The MDN docs show the actual regex browsers are supposed to use.

You've now edited the question to ask about rejecting email addresses with a lack of top-level domain, rather than multiple @ symbols.

The fact is that such email addresses are totally valid.

But if you really want to ensure there is a dot in the domain part, you could add a pattern attribute with a regex like this:

<input type="email" pattern=".*@.+\..+">

edited Feb 03 '18 at 00:12

answered Feb 03 '18 at 00:06

tremby

9,541
4
55
74

You are absolutly right. But check my last comment on the post. I kinda changed my question, i'm sorry for the trouble – cesarPR Feb 03 '18 at 00:12

Sreekanth Reddy Balne · Answer 3 · 2018-02-03T00:33:00.850

What you are looking for can be achieved through the pattern attribute using Regex only for ".com" and ".pt":

<form>
<input type="text" 
pattern="[a-zA-Z0-9_]+(?:\.[A-Za-z0-9!#$%&amp;'*+/=?^_`{|}~-]+)*@[a-zA-Z]+(?:\.com|\.pt)" 
required>
  <input type="submit" value="Send Request">
</form>

And here is a complete pattern to validate any email :

<form>
<input type="text" 
pattern="[a-zA-Z0-9_]+(?:\.[A-Za-z0-9!#$%&amp;'*+/=?^_`{|}~-]+)*@(?!([a-zA-Z0-9]*\.[a-zA-Z0-9]*\.[a-zA-Z0-9]*\.))(?:[A-Za-z0-9](?:[a-zA-Z0-9-]*[A-Za-z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" 
required>
  <input type="submit" value="Send Request">
</form>

`

HTML - How to not allow instroducing an email without ".com"

3 Answers3