Javascript onchange事件阻止HTML表單中的onsubmit事件？

考慮HTML表單：Javascript onchange事件阻止HTML表單中的onsubmit事件？

<form action="" method="POST" onsubmit="return checkValidArray()"> 
    <input type="text" name="data" onchange="return validate(this);"> 
</form>

看來（在IE 6和Firefox 3）當你鍵入一些文本輸入框，然後點擊提交onchange事件觸發輸入字段，但onsubmit事件不會爲表單觸發，直到您第二次單擊「提交」按鈕（當然onchange不會觸發）。換句話說，onchange似乎阻止了onsubmit被解僱。

希望在用戶退出該字段時檢查表單中的每個字段，以便向他們提供即時驗證反饋，並且還防止在存在無效數據時提交表單。

[編輯：請注意這兩個驗證函數包含的警告（）]

怎樣才能解決這個問題？

來源

2009-01-28 machinatus

「點擊提交[和] onchange事件觸發」 - >它點擊按鈕時觸發？ – geowa4 2009-01-28 21:54:45

它會觸發，因爲當按鈕被點擊（並獲得焦點）時，該字段失去焦點。 – 2009-01-28 22:12:50

（的一種）解決方案：

事實證明，它是（）警報只存在 - 輸入的使表單的onsubmit事件不會觸發onchange事件中 - 或確認（）。 JS線程似乎被alert（）阻塞。
解決方法是在輸入的onchange調用中不包含alert（）或confirm（）。

瀏覽器已知受影響：
IE6 - 視窗
IE8 - 贏
FF3 - 贏

瀏覽器已知不會受到影響：
谷歌瀏覽器 - 贏
Safari瀏覽器 - 蘋果
FF - Mac

來源

2009-01-29 20:23:50 machinatus

您可以在輸入中使用onblur事件而不是onchange。

來源

2009-01-28 21:50:35

我試着用Firefox 3（蘋果機）用下面的代碼：

<html> 
     <head> 
      <script> 
       function validate(ele) 
       { 
        alert("vali"); 
        return false; 
       } 

       function checkValidArray() 
       { 
        alert("checkValidArray"); 
       } 

      </script> 
     </head> 
     <body> 
      <form action="" method="POST" onsubmit="return checkValidArray()"> 
       <input type="text" name="data" onchange="return validate(this);"> 
       <input type="submit" value="Ok"> 
      </form> 
     </body> 
</html>

看來工作。當我點擊Ok按鈕時，彈出「Vali」和「Check Valid Array」。最初我認爲return false可能是未提交表單的原因，但它已提交（至少調用了checkValidArray()）。

現在，你在做什麼在你的checkValidArray()和validate()方法？特別的東西？你能發佈代碼嗎？

編輯：我在Windows上測試IE8和FF3，這裏兩個事件都不會被解僱。我不知道爲什麼。也許onblur是一個解決方案，但爲什麼onchange不起作用？有沒有特定的原因還是僅僅是另一個不一致？（適用於Mac上的FF和Safari）

來源

2009-01-28 22:01:56 Nivas

這很有趣，Mac上的行爲不同，所以它看起來依賴於平臺而不依賴於瀏覽器。一定是在那裏的線索...

我試着與尼瓦斯的代碼onblur，但與onchange（只有「Vali」警報）具有相同的結果。

有什麼不同之處在於你是否在驗證（）中做了什麼。註釋掉行警告（「vali」）;它的工作原理！（從validate（）的實際返回值並不重要，但我不期望它。）

編輯：一位同事剛剛在Windows上的谷歌瀏覽器中嘗試過，它在那裏工作。這很直觀，因爲Chrome如何分離JS線程。

有關第一個alert（）阻塞線程的事情導致onsubmit事件丟失。可能的競賽狀況？

來源

2009-01-29 17:57:33 machinatus

不要創建;提交按鈕。相反，創建一個正常的按鈕，並編寫一個函數，該按鈕可以調用onClick。

函數將對錶單字段進行驗證，如果一切正常，它將提交表單。否則它不會。

function validate 
{ 
    "Piece of code to Validate your form" 
    document.formName.action.value = "URL which you want to call" 
document.propFile.submit(); // It will submit he page 
}

來源

2009-06-22 11:16:46

Javascript onchange事件阻止HTML表單中的onsubmit事件？

回答

相關問題