Input email only display suggestions for EMAILS

As requested in the comment, "Would you know how to disable the form button when the message appears?" in the response of Damon Dudek and for the reasons given in the comment on my response "Why is it a contact form, so if the client types a wrong email and even though the message appears, he can still click send and send the message by one -mail missing, disabling the button when having an invalid email he could not send! "

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

Blur method on 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><formaction="https://pt.stackoverflow.com/unanswered">
  <p>email:</p>
  <input id='email' class='validate'>
  <button type='submit' id='validate'>Submit!</button>
</form>

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

  

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

     

Apple's Safari ranks second to most used browsers, with 25.4 percent Font

Andhere'sanotherstatisticnolessdespicableforSafari Font

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

While email validation already exists a native feature of HMTL5, just set your input with type email:

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

Input types: link

To validate is a bit different, like this:

<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.

Font

If you do not want any suggestions to appear use autocomplete=off

For custom suggestions, use Ajax .