javascript - 在输入字段内使用图标后，默认 'input is required/Please fill out this field' 消息不显示

Question

所以我有这个表单，其中有一个需要填写的输入字段才能提交查询。我没有使用按钮来提交表单，而是在输入字段内使用了很棒的字体图标。如果用户单击图标，我可以使用 Javascript 提交表单。

它按照我想要的方式完美工作，但唯一的问题是即使字段为空，表单也会提交。 required 属性不起作用，可能是因为我没有使用按钮。因此，为了阻止提交没有值的表单，我使用了 if 语句来检查是否有值，如果没有值，则使用警报而不是向用户发送消息。但我想向用户显示默认消息，浏览器显示该字段为空。如果在这种情况下该字段为空，如何向用户显示默认消息？

请注意，我使用 Node 和 Express 作为应用程序，使用 ejs 作为模板引擎。 javascript 代码位于 public 文件夹中的 main.js 文件中，而不是位于模板内的脚本标记中。

$(document).ready(function() {
  $("#searchIcon").click(function(e) {
    e.preventDefault();
    if (!$("#input").val()) {
      alert("input empty");
    } else {
      $("#form").submit();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<form id="form" action="/submit" method="GET">
  <input type="text" id="input" name="search" required>
  <i id="searchIcon" class="fas fa-search" aria-hidden="true"></i>
</form>

Answer 1

您可以使用form的checkValidity()和reportValidity()方法来触发默认的HTML5验证:

jQuery(function($) {
  var $form = $('#form');
  
  $("#searchIcon").click(function(e) {
    e.preventDefault();
    
    if (!$form[0].checkValidity()) {
      $form[0].reportValidity();
    } else {
      $("#form").submit();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<form id="form" action="/submit" method="GET">
  <input type="text" id="input" name="search" required>
  <i id="searchIcon" class="fas fa-search" aria-hidden="true"></i>
</form>

但是应该注意的是，由于缺少提交按钮，您的代码不符合可访问性验证要求。

您可以轻松地包含一个，从而消除对任何 JS 代码的需要，只需将其样式设置为看起来像 FontAwesome 图标:

button.submit {
  background: none;
  border: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<form id="form" action="/submit" method="GET">
  <input type="text" id="input" name="search" required>
  <button type="submit" class="submit"><i class="fas fa-search"></i></button>
</form>