在提交表單時不調用javascript函數進行html驗證。

Question

我有有一個文本形式：

$("#myButton").click(function() { 
    alert("blah"); 
}); 

但是，如果文本區域是空的，我想：

<form id="hello"> 
    <textarea id="Testarea" required></textarea> 
</form> 
<button id="myButton" type="submit" value="Submit">Click me! 
</button> 

當用戶提交表單，我通過一個jQuery處理聽聽吧沒有調用我的函數就會拋出一個錯誤。現在，即使textarea爲空，我的函數也會被調用。 https://jsfiddle.net/8dtsfqp0/

Answer 1

在窗體上使用submit處理程序，而不是按鈕上的click處理程序。

這是執行的，當你點擊提交按鈕的順序：

• 按鈕的Click處理程序被調用。如果它調用event.preventDefault()，則過程停止。
• 提交表單，執行以下步驟：
  • 驗證輸入字段。如果任何驗證失敗，則該過程停止。
  • 調用表單的提交處理程序。如果它調用event.preventDefault()，則過程停止。
  • 表單數據被髮送到服務器。

所以，如果你想避免你的函數被調用，它必須是「驗證輸入字段」步驟之後。因此，改變你的代碼：

$("#hello").submit(function() { 
    //Throw error if textarea is empty 
    alert("Her"); 
}); 

Fiddle

Answer 2

你可以試試這個：

$("#myButton").click(function() { 
if($('#Testarea').val().trim().length > 0) 
{ 
return true; 
} 
else 
{ 
alert("empty text box"); 
return false; 
} 

}); 

Answer 3

<script type="text/javascript"> 
document.getElementById("myButton").addEventListener("click", myFunction); 
var problem_desc = document.getElementById("Testarea"); 
function myFunction() { 
    if (problem_desc.value == '') { 
     alert("blank"); 
     return false; 
    } 
    else{ 
    alert("working"); 
    } 
} 
</script>