JavaScript/JQuery добавить сообщение об ошибке

Question

У меня есть следующее поле ввода:

<form action="admin" method="POST" commandName="adminForm" onsubmit="return validateEmail(this.email)"> 
    <table> 
     <tr> 
      <td> 
       <label for="email">Email</label> 
      </td> 
      <td> 
       <input id="email" name="email" type="text" path="email" oninvalid="this.setCustomValidity('Please fill this field - it is mandatory')" oninput="setCustomValidity('')"> 
      </td> 
     </tr> 
    </table> 
</form> 

function validateEmail(email) { 
    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; 
    if (!re.test(email.value)) { 
     email.setAttribute("oninvalid", "this.setCustomValidity('Wrong email format')"); 
     email.setAttribute("oninput", "setCustomValidity('')"); 
     return false; 
    } 
    return re.test(email.value); 
} 

Здесь я хочу, чтобы отобразить сообщение об ошибке при добавлении неправильный адрес электронной почты. Теперь, когда я не добавляю что-то под полем электронной почты, он показывает ошибку Please fill this field - it is mandatory. Я хочу изменить это сообщение, если по электронной почте неправильно.

В настоящее время это не работает, любые идеи почему?

Answer 1

См. Пример источника.

HTML

<form id="myForm" action="admin" method="POST"> 
    <table> 
     <tr> 
      <td> 
       <label for="email">Email</label> 
      </td> 
      <td> 
       <input id="email" name="email" type="text"> 
      </td> 
     </tr> 
    </table> 
    <div id="msg"></div> 
    <button type="submit">submit</button> 
</form> 

и Javascript

var form = document.getElementById('myForm'); 
var msg = document.getElementById('msg'); 
form.addEventListener('submit', function(e) { 


    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; 
    var email = document.getElementById('email').value; 

    if (!re.test(email)) { 

     console.log('invalid'); 
     msg.innerText = 'invalid email'; 
     e.preventDefault(); 
    } else { 
     msg.innerText = ''; 
    } 
}); 

и live demo