html - Autofill on textbox (in Chrome) results in being prefilled without pushing enter -

i have strange issue, results in quite lot of problems our visitors.

on normal textfield, chrome (and other browsers) suggests strings prefill. when hover them , move mouse away, not selected , written in textbox.

however, in setup, have weird case. when hover options, , move mouse it, selects item in box. results in awful lot of "please enter email" messages, while user sees e-mail on screen.

see problem in video: https://www.youtube.com/watch?v=vh2nb0_ir3q

my markup particular e-mail:

<input type="text" name="email" placeholder="e-mail" id="newuseremail" class="email_input newinputtxt"> 

does have hint? because lost...

edit:

full asp.net mvc markup:

<asp:content id="content1" contentplaceholderid="plhmain" runat="server">     <h2>indtast e-mail adresse</h2>     <div class="checkout__section checkout__section--login checkout_auth">             <div class="single_login">                  <div id="newuserbox">                     <div id="provideuseremailbox">                         <div class="email_auth">                             <div>                                <input type="text" name="email" placeholder="e-mail" id="newuseremail" class="email_input newinputtxt" />                             </div>                             <span class="red auth-error-text" style="display: none;" id="invalidemailtext">der skal indtastes en gyldig e-mail</span>                                 <ul class="red_checkmarks" style="margin-top: 5px;">                                     <li>vi bruger e-mail adressen til @ sende en bekræftelse pa din ordre</li>                                     <li>hvis du vil, kan du logge ind eller oprette en konto på næste side.</li>                                 </ul>                         </div>                     </div>                      <div id="createnewuserbtnbox">                         <input id="newuserbtn" type="button" class="button button--primary" value="fortsæt" />                         <span class="red auth-error-text" id="createnewusererrortext"></span>                     </div>                 </div>             </div>             <div id="socialloginlist">                 <button class="pfacebook" type="button" name="provider" value="facebook" title="log ind med din facebook konto">                     facebook                 </button>                 <button class="pgoogle" type="button" name="provider" value="google" title="log ind med din google konto">                     google                 </button>             </div>     </div>     <script type="text/javascript">         $(function () {             $("#newuseremail").keypress(function (event) {                 if (event.keycode == 13) {                     event.preventdefault();                     $("#newuserbtn").click();                 }             });              var auth = checkoutauthorizationflow({ loginuserbox: "#loginwithuserbox", newuserbox: "#newuserbox" });             auth.init();              var facebooklogin = function () {                  var loginurl = '/login?returnurl=' + encodeuricomponent(document.location.href) + '&r=' + (new date().toutcstring()) + '&provider=facebook';                  //alert('facebook login');                  document.location.href = loginurl;                 return;             };              var googlelogin = function () {                  var loginurl = '/login?returnurl=' + encodeuricomponent(document.location.href) + '&r=' + (new date().toutcstring()) + '&provider=google';                  document.location.href = loginurl;                 return;             };             $(".pfacebook").click(facebooklogin);             $(".pgoogle").click(googlelogin);          });     </script> </asp:content> 

so roommate, has been working bit wordpress couple of years back, came computer , said:

"wrap in form tag!"

so told him horrible idea, , said "try it".

and did.

and fucking worked.

so tl;dr -> wrap in form tag, , works... i'll go cry.