2012-04-23 6 views
0

자바에서 유효성이 검사되는 양식을 작성한 다음 유효하면 PHP 제출으로 진행하십시오. PHP가 제대로 작동하고 입력이 유효하지 않은 경우 제출을 허용하지 않습니다. 그러나 유효성 검사 함수가 false로 반환되면 PHP 페이지로 이동하기 전에 양식을 중지 할 수 없습니다. 아무도 내가이 일을하기 위해 무엇을 할 수 있는지 안다?양식 제출 오류 : 자바 스크립트 유효성 검사 및 PHP 제출

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Form</title> 
<script src="contact.js" type="text/javascript"> </script> 
</head> 
<body> 
    <form name="contact"id="contact" action="contact.php" onsubmit="return formSub();"method="post" > 

    <h2 class="headingText"><em>What's your name?</em></h2> 
    <p> 
     <label for="firstName">First Name </label> 
     <input type="text" name="firstName" id="firstName" tabindex="7"> 
     <span id="firstNameHTML" class="error"> </span> 
    </p> 
     <p> 
     <label for="lastName">Last Name</label> 
     <input type="text" name="lastName" id="lastName" tabindex="8"> 
     <span id="lastNameHTML" class="error"> </span> 
    </p> 
     <p>&nbsp;</p> 
     <h2 class="headingText"><em>What's your preferred email address?</em></h2> 
     <p> 
     <label for="email">Email Address</label> 
     <input type="text" name="email" id="email" tabindex="9"> 
     <span id="emailHTML" class="error"> </span> 
</p> 
     <p>&nbsp;</p> 
     <h2 class="headingText"><em>What would you like to contact us about?</em><br><span id="interestHTML"></span> 
     </h2> 

    <p> 
     <label> 
     <input type="checkbox" name="Interest" value="training" id="Interest_training" tabindex="10"> 
     Training Services</label> 
     <br> 
     <label> 
     <input type="checkbox" name="Interest" value="testing" id="Interest_testing" tabindex="11"> 
     Testing Services</label> 
     <br> 
     <label> 
     <input type="checkbox" name="Interest" value="remediation" id="Interest_remediation" tabindex="12"> 
     Remediation Services</label> 
     <br> 
     <label> 
     <input type="checkbox" name="Interest" value="General Question" id="Interest_general" tabindex="13"> 
     General Question</label> 
     <br> 
     <label> 
     <input type="checkbox" name="Interest" value="error" id="Interest_error" tabindex="14"> 
     Report a Website Error</label> 
     <br> 
     <label> 
     <input type="checkbox" name="Interest" value="other" id="Interest_other" tabindex="15"> 
     Other</label> 
</p> 
<p> 
     <label for="comment"><span class="headingText">Please enter your question or comments here. </span></label><br> 
     <span id="commentHTML"></span> 

     <textarea name="comment" id="comment" cols="45" rows="5" width="100px" tabindex="16"></textarea> 
     </p> 
     <input name="submit" type="submit" value="Submit the Form" tabindex="17"> 
     <input name="reset" type="reset" value="Reset the Form" tabindex="18"> 
    </form> 
    <p>&nbsp;</p> 
<p>&nbsp;</p> 
</body></html> 

자바 스크립트 문서 :

// JavaScript Document 
    function checkForm() 
    { 
     formReset(); 
     var error=0; 


     //Check firstName has value 
     if (document.getElementById("firstName").value=="") 
     { 
      document.getElementById("firstNameHTML").innerHTML="<strong> Please provide a first name</strong>"; 
      error++; 

      if(error==1) 
      { 
       document.getElementById("firstName").focus(); 
      } 
     } 

     //Check lastName has value 
     if (document.getElementById("lastName").value=="") 
     { 
      document.getElementById("lastNameHTML").innerHTML="<strong> Please provide a last name</strong>"; 

      error++; 

      if(error==1) 
      { 
       document.getElementById("lastName").focus(); 
      } 
     } 


     //Check email is valid 
     if (document.getElementById("email").value=="" || document.getElementById("email").value.search("@") < 0) 
     { 
      document.getElementById("emailHTML").innerHTML="<strong> Please provide a valid email address</strong>"; 
      error++; 

      if(error==1) 
      { 
      document.getElementById("email").focus(); 
      } 
     } 

     //Check Interest has value 
     if (document.getElementByName("Interest").value=="") 
     { 
      document.getElementById("InterestHTML").innterHTML="<strong> Please let us know what you are interested in contacting us about.</strong>"; 
      error++; 
     } 

     //Check Comment has value 
     if (document.getElementById("comment").value=="") 
     { 
      error++; 
      document.getElementById("commentHTML").innerHTML="<strong> Please provide your questions or comments here</strong><br>"; 

      if(error==1) 
      { 
       document.getElementById("comment").focus(); 
      } 
     } 


     if (error==0) 
     { 
      alert("Passed"); 
      return true; 
     } 


     alert("Failed"); 
     return false; 

    } 

    function formReset(){ 
     document.getElementById("firstNameHTML").innerHTML=""; 
     document.getElementById("lastNameHTML").innerHTML=""; 
     document.getElementById("emailHTML").innerHTML=""; 
     alert("Reset");    
    } 

    function formSub(){ 


     if(checkForm()) 
     { 
      alert("Check is True"); 
      document.getElementById("contact").submit(); 
      return true; 
     } 

      alert("I'm sorry, your submission cannot be completed."); 
      return false; 

    } 
+0

자바 스크립트 기능을 게시 할 수있는 경우에만 자바 스크립트 기능을 볼 수 있으며 도움을 드릴 수 있습니다. –

답변

0

checkForm의 기능을 실수로 변경했습니다. getElementsByName은 요소 배열을 반환합니다. 그래서, 그들 모두가 선택하지 않은 경우 확인하기 위해, 당신은이와 코드를 교체해야 : 당신이 원하는대로

//Check Interest has value 
var interests = document.getElementsByName("Interest");    
var noneChecked = true; 

for(var i = 0; i < interests.length; i++) { 
    if (interests[i].checked) { 
    noneChecked = false; 
    } 
} 

if (noneChecked) { 
    document.getElementById("interestHTML").innterHTML="<strong> Please let us know what you are interested in contacting us about.</strong>"; 
    error++; 
} 

이 그런 다음 기능이 작동합니다.

+0

대단히 고마워요! 그 변화로 이제는 완벽하게 작동합니다. – fourleaf

1

당신은해야한다 : 함수의 형식은 늘 제출 false 반환하는 경우

onsubmit="return formSub();" 

javascript:

을 삭제합니다.

+0

일치하도록 코드를 수정했지만 여전히 제출합니다. – fourleaf

+0

'formSub' 함수의 코드를 초기 게시물에 넣을 수 있습니까? – MatuDuke

+0

게시물의 마지막 기능입니다. – fourleaf