使用jQuery触发无效输入的弹出答案

【问题标题】：Triggering the popup of invalid input using jQuery使用jQuery触发无效输入的弹出
【发布时间】：2019-02-14 03:40:36
【问题描述】：

我成功检查了输入是否有效（在我的情况下是否为空[请忽略susbtring()，由于特定要求，我必须使用它]）。 但是，当您没有在 <input> 中输入任何内容并提交表单时，我想手动触发默认弹出窗口 Input field is not valid。

我想执行上述操作，因为我要检查有效或无效的目标输入位于隐藏的“选项卡”中。如果可能的话，我不想要一个变通的解决方案。是否可以手动触发该弹出窗口？

我检查了目标输入是否有效：

trackedInput = $('#trackedInput');
confirmSubmit = $('#confirmSubmit');

confirmSubmit.click(function(e) {
    if (!trackedInput.val().substring(4)) {
        tabs.eq(0).trigger('click'); //tabs.eq(0) here selects the first div and 'click' it, causing it to be not_hidden and causing the current 'not_hidden' div to be hidden
        return false;
    }
}

<div class = "hidden">
  <input id = "trackedInput" type = "text" form = "confirm">
</div>

<div class = "hidden">
  //Some other stuffs here
</div>

<div class = "not_hidden">
  <input id = "confirmSubmit" type = "submit" form = "confirm">
</div>

<form id = "confirm"></form>

编辑：

默认弹出窗口的意思是：the 'Please fill out this field' popup。

【问题讨论】：

能否给我们看看相关的 HTML 和 JS 代码。谢谢。
@Ekown 不过，这是相关部分。你能具体告诉我你在找什么吗？如前所述，我的input 包含在隐藏的div 中（display: none）。我的input type = "submit" 包含在一个未隐藏的div 中。
HTML 代码会很有帮助。此外，“默认弹出窗口”是什么意思？它是 HTML 输入验证的默认弹出窗口吗？你能澄清一下吗？谢谢。
@Ekown 我已在原始帖子中包含指向弹出窗口的链接。
@Ekown 我还提供了我的 HTML 代码的基本概念。

标签： jquery html forms validation

【解决方案1】：

您可以为此使用form.reportValidity()。它基本上检查表单并对其进行验证，如果检测到无效字段，它将触发该弹出消息。

trackedInput = $('#trackedInput');
confirmSubmit = $('#confirmSubmit');
yourForm = document.querySelector('#confirm');

confirmSubmit.click(function(e) {
  if (!trackedInput.val().substring(4)) {
    yourForm.reportValidity();
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden">
  <input id="trackedInput" type="text" form="confirm" required>
</div>

<div class="hidden">
  //Some other stuffs here
</div>

<div class="not_hidden">
  <input id="confirmSubmit" type="submit" form="confirm" required>
</div>

<form id="confirm"></form>

【讨论】：