domain after @- HTML

Asked

Viewed 257 times

2

Could someone tell me how to do input only accept an email with a certain domain and reject another ?

Ex: 

[email protected] - ok
[email protected] - erro

HTML

<input type="text" name="nome" class="txt_input first_input" placeholder="Nome" required>
                        <input type="email" name="email" class="txt_input" id="email" placeholder="E-mail" required>
                        <input type="email" name="confirmaEmail" class="txt_input" id="confirma-email" placeholder="Confirmar e-mail" required>
html validation

  • Answer with jQuery worth?

  • yes worth :D all help is welcome

2 answers

4


If it’s only with HTML, you can use the Pattern Attribute and validate with Regex, as in the example below:

<form name="myForm">
  <input type="email" name="email" pattern="[A-Za-z0-9._%+-][email protected]" required="required" />
  <button type="submit">Enviar</button>
</form>

As remembered by @Gustavotinoco, the pattern does not support safari in the Desktop version. The full list of supported browsers (Desktop and Mobile) can be seen here.

  • 1

    Randade, I suggest you put * before the @gmail. If he already uses the email, it will validate it automatically. Besides, you are limiting the user as he could not have emails with ., - or _.

  • @Wallacemaxters I edited the expression. I don’t think with * would be the best option, because this would be a second validation (the first is the type="email"). But really, you were right. I added some characters to the expression. vlw

  • 1

    Randrade %? This one surprised me

  • in this case, it is business emails without the . or - I used gmail as an example just outside that, I would need more than one Pattern, that’s another problem that came up

  • @Just change that tune [A-Za-z0-9._%+-] for [A-Za-z0-9], so it will accept only letters and numbers.

  • Just be aware that Pattern is not for all browsers and does not support on safari. I had to resort to another medium because it has these limitations. http://www.w3schools.com/tags/att_input_pattern.asp. Here you can see tests http://www.wufoo.com/html5/#Attributes

  • 1

    @Gustavotinoco Thanks for remembering. Just to clarify, on Safari mobile is supported. No desk that is not, as you said yourself. In the link I put in the reply say this, but I will clarify more. Thanks for the help.

Show 2 more comments

3

You can also validate using the following regular expression in Javascript:

var regex = /@gmail\.com$/;

var gmail = regex.test('[email protected]');

var hotmail = regex.test('[email protected]');

document.writeln('[email protected]: ' + gmail);

document.writeln('<br/>');

document.writeln('[email protected]: ' + hotmail);

The expression @gmail\.com is responsible for capturing the existence of @gmail.com, and $ requires the expression to be found at the end.

Browser other questions tagged html validation

You are not signed in. Login or sign up in order to post.