的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