表單的輸入類型=「提交」似乎並沒有觸發onsubmit處理

Question

我試圖通過的onsubmit觸發JavaScript函數來驗證我的形式。

我知道函數本身的作品，因爲我可以在表單的標記後，立即script標籤內調用它，我收到我的console.log消息，並創建在表單上出現的錯誤消息。

的PHP驗證自己的作品，但我只能夠通過實際放置在一個div JavaScript的.submit提交表單。顯然，因爲這繞過了任何客戶端驗證，所以我不能這樣離開它，因此我用input type="submit"替換了我的div id="submit"。

我一直在尋找其他的例子，包括我自己編碼的，我知道的工作，完全好像出答案的過去式。這可能非常容易，出於某種原因，我不能也不能在過去6個小時內看到它。 O_O

這裏是我的窗體的標記：的onsubmit="return validateForm();" -with或沒有分號

<form name="emailus" id="emailus" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return validateForm();"> 
    <a href="mailto:example@email.com"> 
     <h3><i class="icon-envelope-alt icon-large"></i>Send us an email<span>: example@email.com</span></h3> 
    </a> 

    <div class="half"> 
     <fieldset class="name"> 
      <label for="cf_name"><h4>Name <span>*</span></h4></label> 
      <input type="text" name="cf_name" class="textualformfield" alt="Jane Doe" pattern="^[a-zA-Z'\s]+$"> 
     </fieldset> 
     <fieldset class="emailaddress"> 
      <label for="cf_email"><h4>E-mail <span>*</span></h4></label> 
      <input type="text" name="cf_email" class="textualformfield" alt="janedoe@email.com" pattern="{long string of regex}"> 
     </fieldset> 
     <fieldset class="phonenumber"> 
      <label for="cf_phonenumber"><h4>Phone</h4></label> 
      <input type="tel" name="cf_phonenumber" class="textualformfield" alt="555-555-5555"> 
     </fieldset> 
     <fieldset class="eventdate"> 
      <label for="cf_eventdate"><h4>Event Date</h4></label> 
      <input type="text" name="cf_eventdate" class="textualformfield" alt="May 25th, 2012"> 
     </fieldset> 
     <fieldset class="location"> 
      <label for="cf_location"><h4>Location</h4></label> 
      <input type="text" name="cf_location" class="textualformfield" alt="The Church"> 
     </fieldset> 
    </div> 

    <div class="half"> 
     <textarea name="cf_message" class="textualformfield" alt="Your Message"></textarea> 
    </div> 

    <input type="submit" for="emailus" name="submit" id="submit" value="Submit"> 
</form> 

我已經嘗試幾種不同的迭代，寫它作爲onSubmit或onsubmit ...我不知道。我根本看不出這有什麼問題。任何人？

以下被稱爲onsubmit，validateForm功能。它位於另一個文件中，但該文件始終包含在表單中，並且我確信此函數不在$(document).ready之內，並且可以在全局範圍內使用，因爲我已經在表單後直接從腳本標記中調用它。

var validateForm = function() { 
    var valid = true; 

    jQuery('p.validationhelpers').remove(); 

    if (document.emailus.cf_email.value == "" || document.emailus.cf_email.value == "janedoe@email.com") { 
     jQuery('.emailaddress').append("<p class='validationhelpers'>Please enter an email address.</p>"); 
     jQuery('.emailaddress>input').focus(); 
     valid = false; 
    } 

    if (document.emailus.cf_name.value == "" || document.emailus.cf_name.value == "Jane Doe") { 
     jQuery('.name').append("<p class='validationhelpers'>Please enter your name.</p>"); 
     jQuery('.name>input').focus(); 
     valid = false; 
    } 
    console.log("I was triggered"); 

    return valid; 
} 

編輯2：增加PHP驗證/郵編：

<?php if (!empty($_POST)) { 
    $field_name = $_POST['cf_name']; 
    $field_email = $_POST['cf_email']; 
    $field_phone = $_POST['cf_phonenumber']; 
    $field_eventdate = $_POST['cf_eventdate']; 
    $field_location = $_POST['cf_location']; 
    $field_message = $_POST['cf_message']; 

    $mail_to = 'example@email.com'; 

    //final attempt at validation or email submission preventation 
    if ($field_name == "Jane Doe" || empty($field_name) || $field_email == "janedoe@email.com" || empty($field_email)) { 
     return false; 
    } 


    if (!($field_eventdate == "May 25th, 2012") && !empty($field_eventdate) && !($field_name == "Jane Doe") && !empty($field_name)) { 
     $subject = 'Request for '.$field_date. ' from '.$field_name . 'via thiswebsite.com'; 
    } else { 
     $subject = $field_name . ' has contacted you via thiswebsite.com'; 
    } 

    if (!($field_name == "Jane Doe") && !empty($field_name)) { 
     $body_message = 'Client\'s Name: '.$field_name."\n\n"; 
    } 
    if (!($field_email == "janedoe@email.com") && !empty($field_email)) { 
     $body_message .= 'E-mail: '.$field_email."\n\n"; 
    } 
    if (!($field_phone == "555-555-5555") && !empty($field_phone)) { 
     $body_message .= 'Phone: '.$field_phone."\n\n"; 
    } 
    if (!($field_eventdate == "May 25th, 2012") && !empty($field_eventdate)) { 
     $body_message .= 'Event Date: '.$field_eventdate."\n\n"; 
    } 
    if (!($field_location == "The Church") && !empty($field_location)) { 
     $body_message .= 'Location: '.$field_location."\n\n"; 
    } 
    if (!($field_message == "Your Message") && !empty($field_message)) { 
     $body_message .= 'Message: '. "\n".$field_message; 
    } 

    $headers = 'From: '.$field_email."\r\n"; 
    $headers .= 'Reply-To: '.$field_email."\r\n"; 

    $mail_status = mail($mail_to, $subject, $body_message, $headers); 

    $body_message = stripslashes($body_message); 

    if ($mail_status) { ?> 
     <script language="javascript" type="text/javascript"> 
      jQuery(document).ready(function() { 
       jQuery('#contactus').before("<hr class='confirmationhelpers'><p class='confirmationhelpers'>Your e-mail has been sent!<br/>Thank you! We'll contact you shortly.</p><hr class='confirmationhelpers'>"); 
      }); 
     </script> 
    <?php 
    } 
    else { ?> 
     <script language="javascript" type="text/javascript"> 
      jQuery(document).ready(function() { 
       alert('It seems there\'s been an error. Please, send an email to example@email.com to request your appointment.'); 
      }); 
     </script> 
    <?php 
    } 
} 

?> 

只是要清楚，當我點擊提交按鈕，絕對沒有任何反應。

Answer 1

你jQuery是阻止表單提交這裏：

//this hides the contact form if the overlay is clicked. children is there to prevent the children from also having this effect. 
    $('.overlay_vertical_align').click(function() { 
     $('.grey_overlay').fadeOut('slow'); 
    }).children().click(function(e) { 
     return false; 
    }); 

我的意思是，當我調試您的網站，並按下提交按鈕，我到達上面的return false;，在此之後，事件處理結束。 （），

Answer 2

的任何原因的情況是，您使用新的HTML5「模式」它試圖正則表達式驗證您輸入它甚至達到你的驗證功能之前的屬性。刪除模式屬性並重試。