내 JavaScript 양식 유효성 검사가 작동하지 않습니다.

Question

양식에서 3 개의 필드의 유효성을 검사하려고합니다. 이 양식은 간단한 연락 양식과 JavaScript입니다. 아래는 검증을 위해 자바 스크립트 코드 :

<script type="text/javascript"><!-- 
function validateForm() { 
with (document.contact-form) { 
var alertMsg = "The following REQUIRED fields\nhave been left empty:\n"; 
if (name.value == "") alertMsg += "\nNAME IS REQUIRED"; 
if (email.value == "") alertMsg += "\nEMAIL IS REQUIRED"; 
if (phone.value == "") alertMsg += "\nPHONE IS REQUIRED"; 
if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") { 
alert(alertMsg); 
return false; 
} else { 
return true; 
} } } 

// --></script> 

는 양식에 대한 내 HTML 코드는 다음과 같습니다

<form id="contact-form" name="contact-form" action="form.php" method="post" 
    onsubmit="return validateForm()"> 
<input id="name" type="name" name="name" value="NAME" 
    onfocus="if (this.value=='NAME') this.value='';" onblur="if (this.value=='') 
    this.value='NAME';"/><br /> 
<input id="email" type="email" name="email" value="EMAIL" onfocus="if  
    (this.value=='EMAIL') this.value='';" onblur="if (this.value=='') 
    this.value='EMAIL';" /><br /> 
<input id="phone" type="text" name="phone" value="PHONE" class="phone" onfocus="if 
    (this.value=='PHONE') this.value='';" onblur="if (this.value=='') 
    this.value='PHONE';" /><br /> 
<input type="text" name="event-location" value="EVENT LOCATION" onfocus="if 
    (this.value=='EVENT LOCATION') this.value='';" onblur="if (this.value=='') 
    this.value='EVENT LOCATION';" /><br /> 
<input type="text" name="event-date" value="EVENT DATE" onfocus="if 
    (this.value=='EVENT DATE') this.value='';" onblur="if (this.value=='') 
    this.value='EVENT DATE';" /><br /> 
<input type="text" name="event-time" value="EVENT TIME" onfocus="if 
    (this.value=='EVENT TIME') this.value='';" onblur="if (this.value=='') 
    this.value='EVENT TIME';" /><br /> 
<input type="text" name="message" value="MESSAGE" class="message" onfocus="if 
    (this.value=='MESSAGE') this.value='';" onblur="if (this.value=='') 
    this.value='MESSAGE';" /><br /> 
<input type="submit" name="send" value="SEND" /> 
</form> 

어떤 도움은 매우 극명하게 될 것이다.

감사

Answer 1

이

<script type="text/javascript"><!-- 
function validateForm() { 
    var mytable = document.getElementById('contact-form'); 
    with (mytable) { 
    var alertMsg = "The following REQUIRED fields\nhave been left empty:\n"; 
    if (name.value == "" || name.value == "NAME") alertMsg += "\nNAME IS REQUIRED"; 
    if (email.value == "" || email.value == "EMAIL") alertMsg += "\nEMAIL IS REQUIRED"; 
    if (phone.value == "" || phone.value == "PHONE") alertMsg += "\nPHONE IS REQUIRED"; 
    if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") { 
     alert(alertMsg); 
     return false; 
    } else { 
     return true; 
    } } } 
// --></script> 

또는 좀 더 직접

<script type="text/javascript"><!-- 
function validateForm() { 
    var mytable = document.getElementById('contact-form'); 
    var alertMsg = "The following REQUIRED fields\nhave been left empty:\n"; 
    if (document.getElementById('name').value == "") alertMsg += "\nNAME IS REQUIRED"; 
    if (document.getElementById('email').value == "") alertMsg += "\nEMAIL IS REQUIRED"; 
    if (document.getElementById('phone').value == "") alertMsg += "\nPHONE IS REQUIRED"; 
    if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") { 
    alert(alertMsg); 
    return false; 
    } else { 
    return true; 
    } } 
// --></script>