使用Javascript提交HTML5表單並驗證其輸入

我正在撰寫表單併爲其輸入添加html5驗證屬性，如「必需」，「自動聚焦」。我使用Javascript來提交使用document.myForm.submit（）的表單，但它不驗證HTML5驗證屬性的表單，因爲它們不在那裏。使用Javascript提交HTML5表單並驗證其輸入

有什麼建議嗎？

來源

2011-07-28 Ahmed Elmorsy

看起來，在提交按鈕上觸發click的確具有正確的效果：http://jsfiddle.net/e6Hf7/。

document.myForm.submitButton.click();

，倘若你沒有一個提交按鈕，添加一個不可見的，如：在pimvdb的答案是基於一種變通方法

<input type="submit" style="display:none" name="submitButton">

來源

2011-07-28 08:44:52 pimvdb

它不起作用！ –

@Ahmed Elmorsy：它適用於Chrome。小提琴會失敗嗎？ – pimvdb

我也在使用Chrome。屬性submitButton未定義 –

爲什麼不乾脆叫你做document.myForm.submit（）

什麼驗證框架你用什麼AJAX庫之前手動驗證？

如果你使用jQuery這裏是爲了防止代碼提交：

$('#myForm').submit(function(evt) { 
    if (! $('#myForm').validate()) { 
    evt.preventDefault(); 
    } 
});

，並觸發通過提交：

$('#myForm').submit();

被觸發時提交這將調用驗證。而如果驗證失敗，則阻止提交執行。但我會看看你的驗證框架，因爲它通常應該這樣做

如果你沒有使用任何JavaScript框架，你可能想看看：element.checkValidity();以及如何從JavaScript調用HTML5驗證甚至要求提交。

來源

2011-07-28 08:43:47 Tigraine

「框架」是純HTML5，他想調用它的內置驗證功能。 – Xion

謝謝..我沒有意識到驗證的東西已經在瀏覽器中實現..我用MDN的指針更新了答案 – Tigraine

是的Xion說這是純HTML5有誰知道如何使用它的內置驗證功能？？ –

，包括隱藏的提交按鈕。

HTML5提供了javascript功能，可以在沒有提交按鈕的情況下實現同樣的功能。作爲Tigraine指出，Mozilla文件的 '形式' 元件中的兩個有效性檢查方法：

checkValidity（）返回true/false，並且不顯示任何給最終用戶
reportValidity（）返回真/假並且還示出了驗證消息給最終用戶（如正常提交按鈕點擊一樣）

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<form name="testform" action="action_page.php"> 
 
E-mail: <input type="email" name="email" required><br/> 
 
<a href="#" onclick="javascript:console.log(document.testform.reportValidity());return false;">Report validity</a><br/> 
 
<a href="#" onclick="javascript:console.log(document.testform.checkValidity());return false;">Check validity</a><br/> 
 
<a href="#" onclick="javascript:if(document.testform.reportValidity()){document.testform.submit();}return false;">Submit</a> 
 
</form> 
 

 
</body> 
 
</html>

來源

2015-05-08 12:57:05 zutnop

使用Javascript提交HTML5表單並驗證其輸入

回答

相關問題