如果使用jquery，如何檢查文本框是否為空並顯示彈出消息？

Question

我正在嘗試檢查表單的文本框是否為空。 但是，每當我嘗試單擊“提交”而不是警報框消息時，告訴我“姓氏”為空，都會收到“請填寫”。

 ('#submit').click(function() { if ($('#firstname').val() == '') { alert('Firstname is empty'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="elem" autocomplete="on"> First Name: <br> <input type="text" name="firstname" id="firstname" required placeholder="Enter the first name" pattern="[A-Za-z\\-]+" maxlength="25"><br> <input type="submit" id="submit" value="Submit" /> </form> 

Answer 1

首先，我假設丟失的$只是問題中的錯字，因為您聲明看到驗證消息出現。

您看到“請填寫此字段”通知的原因是因為您在該字段上使用了required屬性。 如果要手動驗證表單，請刪除該屬性。 您還需要鈎住form的submit事件，而不是click button ，如果驗證失敗，則阻止表單提交，如下所示：

 $('#elem').submit(function(e) { if ($('#firstname').val().trim() == '') { e.preventDefault(); alert('Firstname is empty'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="elem" autocomplete="on"> First Name: <br> <input type="text" name="firstname" id="firstname" placeholder="Enter the first name" pattern="[A-Za-z\\-]+" maxlength="25"><br> <input type="submit" id="submit" value="Submit" /> </form> 

我個人建議您使用required屬性，因為它可以保存上面所有不必要的JS代碼-除非您需要更復雜的邏輯，而不僅僅是檢查所有必填字段是否已提供值。

Answer 2

因為已設置了必需的屬性，所以請您填寫字段驗證作為錯誤消息，這是HTML5正在執行的驗證。

Answer 3

為此，請執行以下一項功能：

function Checktext()
{
 if ($('#firstname').val() == '') {
 alert('Firstname is empty');
return false;
}

else
{
return true;
}
}

現在在提交按鈕單擊時調用此功能，例如：

<input type="submit" id="submit" value="Submit" onclick="return check();" />