表单提交错误：Javascript验证和PHP提交

我正在使用Javascript验证表单，如果有效，请继续进行PHP提交。 PHP工作正常，如果输入无效，将不允许提交。但是，如果验证函数返回false，则无法在转到PHP页面之前停止窗体。有谁知道我能做些什么来完成这项工作？表单提交错误：Javascript验证和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？文档：

// 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; 

    }

来源

2012-04-23 fourleaf

如果你可以发布你的javascript功能，那么只有我们将能够看到你的javascript功能，并可以帮助你 – 2012-04-23 16:22:08

您在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++; 
}

那么你的功能将作为你想要的。

来源

2012-04-23 17:19:34 MatuDuke

非常感谢！随着这一变化，它现在完美运作。 – fourleaf 2012-04-24 13:45:57

你应该这样做：

onsubmit="return formSub();"

删除javascript:

如果你的函数返回false表单不会被提交。

来源

2012-04-23 15:39:14 MatuDuke

我修改了我的代码来匹配，它仍然提交。 – fourleaf 2012-04-23 16:04:28

你可以把你的函数'formSub'的代码放在你的初始文章中吗？ – MatuDuke 2012-04-23 16:22:12

这是帖子中的最后一个功能。 – fourleaf 2012-04-23 16:36:02

表单提交错误：Javascript验证和PHP提交

回答

相关问题