为具有不同消息的一页的多个输入上的无效输入调用弹出框答案

【问题标题】：Calling a popover for an invalid input on multiple inputs for one page with different messages为具有不同消息的一页的多个输入上的无效输入调用弹出框
【发布时间】：2020-09-14 19:35:42
【问题描述】：

到目前为止，如果该字段为空，我将使用此类为同一页面上的所有输入调用相同的消息。

$(document).ready(function() {
  $("#submitCalculation").click(function() {
    $(".checkCalc").each(function() {
      $val = $(this).val();
      if ($val === "") {      
        $(this).popover({
          content: "Enter the correct value."
        });
        $(this).popover('show');
      }
    })
  })
})

我也在运行 Bootstrap，所以我有很多问题：

if ($val === "")

适用于空值。但我还想补充一下，如果任何 NOT 数字的字符也需要为此弹出。除了我想要的消息是“您只能在此字段中输入数字”。或类似的东西。我已经进行了 HTML 验证，并且我关闭了自动弹出窗口进行验证。

第二件事，可以叫弹窗的方向吗？我希望弹出窗口出现在输入下方，但是，我并不挑剔，但我想知道它是如何实现的。

第三件事，我在这个页面上有七个输入框，所以每个都有点独特，我是否必须为每个具有唯一消息的输入做一个单独的 $(document).ready(function() { 或者我可以将不同的类链接在一起来调用特定的消息？

第四件事，我希望弹出框在输入正确值时消失，或者，如果更简单，当他们单击输入框时出现错误。

我对 JS 很陌生，所以现在这一切都比我的工资等级略高，但是一旦我学会了这一点，我想我将能够在这种情况下帮助许多其他人。我已经很高兴找到使弹出窗口发生的代码 - 小步骤:)

谢谢 - 我总是为正确答案打勾！

最后一件事，这是关于编码礼仪，在同一页面上我有纯 JS，在同一个 .js 文件上使用 JS 和 Query 是不是不好的形式？我需要将这一切都转换为 JS 吗？

【问题讨论】：

标签： javascript jquery popover

【解决方案1】：

经过深思熟虑，我发现我可以使用以下代码：

$(document).ready(function() {
  $("#submitCalculation").click(function() {
    $(".checkVelocity").each(function() {
      const val = $(this).val();
      if (isOpen(val) || val > 300) {
        $(this).popover({
          placement: "top",
          content: '<textarea class="popover-textarea"></textarea>',
          template: '<div class="popover"><div class="arrow"></div>' +
            '<div class="row"><div class="col-3 my-auto"><i class="fas fa-exclamation-triangle" id="invalid-input3">' +
            '</i></div><div class="popover-content col-9">Enter the velocity of the car between 10 and 300 ms<sup>-1</sup>, kmh<sup>-1</sup> or mph.' +
            '</div></div>'
        });
        $(this).popover("show");
        $(this).click(function() {
          $(this).popover("hide");
        });
        $('html, body').scrollTop($(".cardBodyVelocity").offset().top);
      }
    })
  })
})

这具有允许滚动到无效输入的额外优势。

【讨论】：