Input email display only suggestions for EMAILS

Question

Hello, I have an email input and to facilitate typing and everything else I would like a "auto suggestion", but it is showing everything I’ve typed with the letter G, for example including names, things, emails and etc, I would like when I click in the field of e-mail it gives me the suggestion of only emails I’ve typed, would anyone know how to do that? And I would like to add a validation, to see if the user typed with @dominio.com, and did this validation on Blur.

Answer 1

Email suggestions for an email field are automatically made by the browsers, you just give the email name to your input.

While e-mail validation, there is already a native feature of HMTL5, just set your input with type email:

<input type="email" name="email" />

Input types: https://www.w3schools.com/html/html_form_input_types.asp

Answer 2

To validate is a little different, so:

<form action="">
    <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"/>
    <input type="submit"/>
</form>

Then you need to see if this pattern is correct.

Source

If you don’t want suggestions to appear use autocomplete=off

For custom suggestions there uses Ajax.

Answer 3

As requested in the comment _{"You would know how to disable the form button when the message appears?"} in the response of Damon Dudek, and for the reasons set out in my reply _{"Why is it a contact form, so if the customer enters a wrong email and it still appears he can still click to send and send the message by a non-existent email, disabling the button when he has an invalid email he could not send!"}

it is not necessary to disable the form button when the message appears, just put the validation in it too!!

Metodo Blur no input id='email' and click on button type='submit'

function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

function validate() {
  $("#result").text("");
  var email = $("#email").val();
  if (validateEmail(email)) {
//$("#result").text(email + " é valido :)");
//$("#result").css("color", "green");
return true;
  } else {
$("#result").text(email + " não é válido :(");
$("#result").css("color", "red");
return false;
  }
  
}

$(".validate").bind("blur", validate);
$("#validate").bind("click", validate);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="/unanswered">
  <p>email:</p>
  <input id='email' class='validate'>
  <button type='submit' id='validate'>Submit!</button>
</form>

<h2 id='result'></h2>

Input type="email" is not supported by IE9 and earlier and Safari.

Apple Safari ranks second to most used browsers, with 25.4 percent Source

And here another statistic no less negligible for Safari Source