2013-03-27 141 views
1

這真的讓我感到一個循環。 當我的validateForm函數位於全局變量中時,我通過調用onsubmit="return validateForm()"成功驗證了此表單,並用我的JavaScript驗證了該函數。不幸的是,一旦我開始嘗試調試IE8,我一直得到錯誤,對具有全局變量,我決定把它全局函數,而不是...onsubmit返回validateForm不觸發

現在,我似乎無法得到它在所有觸發。 -_-

(而且是啊,從來實際測試中它的前綴,以確保它是不衝突,由於是全球性的。)

從我所知道的,我做的縮影一個基本的形式。這種方法是w3schools上顯示的方法,它適用於他們,所以...什麼給了?

我的形式:

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

    <div class="half"> 
     <fieldset class="name"> 
      <label for="cf_name">Name <span>*</span></label> 
      <input type="text" id="cf_name" name="cf_name" class="textualformfield" placeholder="Jane Doe" pattern="^[a-zA-Z'\s]+$"> 
     </fieldset> 
     <fieldset class="emailaddress"> 
      <label for="cf_email">E-mail <span>*</span></label> 
      <input type="text" id="cf_email" name="cf_email" class="textualformfield" placeholder="[email protected]" pattern="[a-z0-9!#$%\x26'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%\x26'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b"> 
     </fieldset> 
     <fieldset class="phonenumber"> 
      <label for="cf_phonenumber">Phone</label> 
      <input type="tel" id="cf_phonenumber" name="cf_phonenumber" class="textualformfield" placeholder="555-555-5555"> 
     </fieldset> 
     <fieldset class="eventdate"> 
      <label for="cf_eventdate">Event Date</label> 
      <input type="text" id="cf_eventdate" name="cf_eventdate" class="textualformfield" placeholder="May 25th, 2012"> 
     </fieldset> 
     <fieldset class="location"> 
      <label for="cf_location">Location</label> 
      <input type="text" id="cf_location" name="cf_location" class="textualformfield" placeholder="The Church"> 
     </fieldset> 
    </div> 

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

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

我的JavaScript函數,位於的(document).ready之外,使其應該能夠被稱爲:

function validateForm() { 
    window.alert("I'm activating!"); 
    var valid = true; 

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

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

    if (document.emailus.cf_name.value === '') { 
     jQuery('.name').append("<p class='validationhelpers'>Please enter your name.</p>"); 
     jQuery('.name>input').focus(); 
     valid = false; 
    } 

    return valid; 
} 

相反,它只是提交... 我覺得這是一個愚蠢的問題。我已經嘗試用return validateForm();return false; return validateForm()(確實返回了錯誤並阻止提交),return validateForm(); return false();validateForm()validateForm();替換onsubmit的內容。

> _ <

SOLUTION: bjornarvh找到了真正的原因,從調試現場實際。我在此突出顯示它,因爲真正的答案是,標記爲已解決答案的評論

原來我在javascript中遺漏了我的一個函數的右括號,這導致validateForm函數被封裝在(document).ready之內,這使onsubmit無法訪問。意外範圍問題!

回答

2

JavaScript是大小寫敏感的,所以你需要添加的

onsubmit="return ValidateForm()" 

代替

onsubmit="return validateForm()" 
+0

啊,廢話。我很抱歉 - 我搞砸了複製/粘貼,因爲我刪除了發佈示例的前綴。但實際的代碼沒有這個問題。案件是相同的。 – aminimalanimal 2013-03-27 09:36:08

+0

我在本地嘗試了代碼,它似乎按預期工作。我可以嘗試去調試你的網站,但是我得到了一個「Womp Womp」,我們可能幾乎肯定會打破這個頁面,快速幫助我們吧?當我去「聯繫」@aminimalanimal – bjornarvh 2013-03-27 09:49:03

+0

它不應該讓你去聯繫。點擊聯繫人/信息應該覆蓋當前頁面頂部的表單...如果這就是你正在做的事情,它讓你點擊/聯繫,你在哪個瀏覽器? @bjornarvh – aminimalanimal 2013-03-27 10:15:48