所以我有这个表单,其中有一个需要填写的输入字段才能提交查询。我没有使用按钮来提交表单,而是在输入字段内使用了很棒的字体图标。如果用户单击图标,我可以使用 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>
最佳答案
您可以使用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>
关于javascript - 在输入字段内使用图标后,默认 'input is required/Please fill out this field' 消息不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59154277/