javascript - 如果使用 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 属性。如果您想手动验证表单，请删除该属性。您还需要 Hook form 的 submit 事件，而不是 button 的 click 并防止如果验证失败，则提交表单，如下所示:

$('#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 代码 - 除非您需要比仅检查所有必填字段都已给定值更复杂的逻辑。