如何防止默認的瀏覽器輸入驗證？

Question

我有一個簡單的表單，帶有電話輸入和一些電子郵件輸入，但是當我單擊提交按鈕時，我無法擺脫出現的默認瀏覽器警告消息。

My CodePen

我試圖實現event.preventDefault();但似乎我的情況下工作不。我動態創建輸入字段的

$('#profile-info-form').unbind('submit').bind("submit", function(event) { 
    event.preventDefault(); 
    console.log('save button clicked'); 
}); 

例子：

var myphone = "<li><label>Cell Phone:</label></li><li><input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' /></li>"; 

你會如何處理這個問題？

Answer 1

刪除pattern屬性？只需使用tel類型，您仍然可以在移動設備上獲得鍵盤界面，並且無需運行本機驗證/格式化。

Answer 2

如果您想要禁用客戶端驗證的表單添加一個novalidate屬性的表單元素。外匯：

<form method="post" action="" id="profile-info-form" novalidate> 

// Your script Here 

</form> 

見http://www.w3.org/TR/html5/forms.html#attr-fs-novalidate