PHP表單行爲不起作用

Question

我正在做一個JavaScript和PHP表單驗證，我已經做好了一切準備，但由於某種原因，我的PHP和JavaScript不能一起工作。如果我註釋掉我的JavaScript，那麼我的PHP文件就可以工作，但否則我的表單將不會拾取我的PHP文件。

我已經嘗試過在表單操作以及PHP中包含<div>。也沒有工作。

function validateContactForm() 
{ 

    var error = "<strong>There were error(s) in your form:</strong>"; 
    var errorMsg = new Array(); 


    var name = document.ContactForm.name; 
    var email = document.ContactForm.email; 
    var message = document.ContactForm.message; 
    var subject = document.ContactForm.subject; 

    if (name.value == "") 
    {  
     errorMsg.push("<br />Please enter your name"); 
    } 
    if (email.value == "") 
    { 
     errorMsg.push("<br />Please enter your email."); 

    } 
    if (subject.value == "") 
    { 
     errorMsg.push("<br />Please enter a subject."); 

    } 
    if (message.value == "") 
    { 
     errorMsg.push("<br />Please enter a message."); 
    } 

    var messageHtml=""; 

    errorMsg.forEach(function(comment) { 
     messageHtml += comment; 
    }); 

    if(messageHtml.length > 0){ 
     $("#error").show(); 
     document.getElementById("error").innerHTML = error + messageHtml; 
     return false; 
    } else { 
     $("#error").hide(); 
     $("#success").show(); 
     document.getElementById("success").innerHTML = "<strong>Thank you!</strong> I'll be in touch."; 
     document.getElementById("validationForm").reset(); 
     return false; 
    } 

    return true; 
} 

HTML：

<div class="container" style="margin-top:50px"> 

    <div class='row whiteBackground'> 
     <h1>Contact Form</h1> 
     <?php echo $result; ?> 
     <div id="error" class='alert alert-danger'> </div> 
     <div id="success" class="alert alert-success"></div> 
     <form name="ContactForm" action="email.php" method="post" class="form-horizontal" id="validationForm" onsubmit="return validateContactForm();"> 

      <div class="form-group name"> 
       <label for="name" class="col-sm-2 control-label">Name</label> 
       <div class="col-sm-10"> 
        <input type="text" name="name" id="name" class="form-control" placeholder="Your Name" /> 
       </div> 
      </div> 
      <div class="form-group email"> 
       <label for="email" class="col-sm-2 control-label">Email</label> 
       <div class="col-sm-10"> 
        <input type="text" class="form-control" name="email" placeholder="Your Email" /> 
       </div> 
      </div> 
      <div class="form-group subject"> 
       <label for="subject" class="col-sm-2 control-label">Subject</label> 
       <div class="col-sm-10"> 
        <input type="text" class="form-control" name="subject" placeholder="Subject Message" /> 
       </div> 
      </div> 
      <div class="form-group message"> 
       <label for="message" class="col-sm-2 control-label">Message</label> 
       <div class="col-sm-10"> 
        <textarea class="form-control" name="message" placeholder="Your message..."></textarea> 
       </div> 
      </div> 
      <div class="g-recaptcha col-sm-offset-2" data-sitekey="6LehmgETAAAAAKSi_P8IFa9f7sqS5XXW0UK7PQDv"></div> 
      <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-10"> 
        <input type="submit" name="submit" class="btn btn-success btn-lg" value="Send Message" /> 

       </div> 
      </div> 

     </form> 
    </div> 
    <script> 
     $("#error").hide(); 
    </script> 
    <script> 
     $("#success").hide(); 
    </script> 
</div> 

Answer 1

你的函數返回false所有的時間。更新它是這樣的：

if(messageHtml.length > 0){ 
    $("#error").show(); 
    document.getElementById("error").innerHTML = error + messageHtml; 
    return false; 
} else { 
    $("#error").hide(); 
    $("#success").show(); 
    document.getElementById("success").innerHTML = "<strong>Thank you!</strong> I'll be in touch."; 
    document.getElementById("validationForm").reset(); 
    return true; 
}