2010-06-30 32 views
2

我正在構建一個使用jQUery驗證插件的站點,並且在提交表單之前需要驗證事項。我的代碼如下所示在鉻中觸發任何文本框中的輸入觸發表單提交,即使沒有提交按鈕時

<form> 
    <input type="button" value="Submit the Form" onclick="validateAndSubmit()" /> 
</form> 
<script language="javascript"> 

    function validateAndSubmit(){ 
    //do some validation and then submit 
} 

</script> 

在Firefox中,此功能完美無缺。在Chrome中,當我點擊頁面中的任何位置時,表單提交被觸發,驗證也不起作用。有什麼可以避免嗎?如果沒有提交按鈕,當我們點擊回車時瀏覽器不應該提交表單嗎?

回答

3

使用的語法如下:

<form onsubmit="return validateAndSubmit()"> 
... 

如果需要可能趕上回車鍵,你可以通過綁定一個處理它keydown事件輸入和執行上的鍵代碼#13

1

我不確定是否有關於此的標準。無論如何,通過簡單地採用更強大的策略,您可以完全避免麻煩:在窗體上實現驗證,作爲onsubmit操作,而不是按鈕的onclick操作。我幾乎從不使用窗體中的按鈕;不得不爲你的做只會讓我失望,這對用戶不好。

無論如何。形式onsubmit是要走的路。如果你使用的不是HTML非侵入式JavaScript我會很感激的屬性:)

+1

你的用戶不會欣賞你的頁面添加行爲頁面加載前的表單並錯過了有用的JavaScript功能。 – 2010-06-30 11:01:16

+0

@Tim Down - 我知道這是一個語義問題,但他們不會理解它的唯一原因是他們不知道它曾經存在過。但是,聽起來好像你使用'window.onload'而不是DOMReady函數,這是頁面加載等待問題的真正原因。 (也就是說,除非用戶的連接速度太慢,否則在填寫整個表單之前甚至無法下載腳本,在這種情況下,直接嵌入JavaScript會使頁面加載時間變得更糟糕,無論如何。) – Matchu 2010-06-30 17:55:50

+0

I在可用的地方使用'DOMContentLoaded'。我只是不明白,使用事件處理程序屬性總是會在文檔加載後分配事件處理程序的基礎上變得更加糟糕。 – 2010-06-30 23:16:17

2

一些動作試試這個方法:後如果他們已經提交了它加載

<form onsubmit="return validateAndSubmit(this);"> 
    <input type="submit" value="Submit the Form"/> 
</form> 
<script language="javascript"> 

    function validateAndSubmit(form_obj){ 
    if(some_variable == 'correct_value') { 
     form_obj.submit(); 
     return true; 
    } else { 
     alert('Wrong value'); 
     return false; 
    } 
    //do some validation and then submit 
} 

</script> 
+0

函數validateAndSubmit()返回什麼?一個布爾值?我必須如何停止驗證? – 2010-06-30 09:27:34

+0

我更新了代碼。我希望現在很清楚。 – antyrat 2010-06-30 09:30:18