如果使用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();" />