的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