javascript - 如果单击时字段为空，则显示工具提示

Question

我知道这类似于表单上的“必需”，但如果可能的话，我需要它像这样工作。我已经在使用此处修改过的代码，但它仅适用于 1 个表单元素。我能做到的唯一方法是将相同的过程添加 4 次，但是有没有更快更清洁的方法呢？？？？基本上，这可以用于具有各种不同输入的多种形式，得到不同的消息。谢谢

JS fiddle 是 https://jsfiddle.net/DTcHh/79251/

HTML代码是

<label class="control-label" for="id_stock">Stock</label>
<button id="id_stock_btn" type="button" name="stock_btn">Check form</button>
<input type="number" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">
<input type="number2" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">
<input type="number3" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">
<input type="number4" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">

JS 是:

/* Latest compiled and minified JavaScript included as External Resource */
// Initialize tooltip on #id_stock input
$('#id_stock').tooltip({
  title: "Please enter address",
  trigger: "manual"
});

// Manually hide tooltip when re-clicking the input
// This can be modified to hide the tooltip whenever you see fit
$("#id_stock").click(function(e) {
  $(this).tooltip("hide");
});

$("#id_stock_btn").click(function() {
  /* Act on the event */
  if(!$('#id_stock').val())
  {
    $('#id_stock').tooltip("show");  // Show tooltip
  }
  else {
    //Do Some Other Stuff
  }

});

Answer 1

如果我没有正确理解您的问题，那么您正在尝试将保存 javascript 应用于 4 个相似的元素。

一个简单的方法是将您的输入包装在一个 div 中，然后更改 jquery 选择器以选择所有表单。我在你的 JS fiddle 中得到了以下代码。

<label class="control-label" for="id_stock">Stock</label>
<button id="id_stock_btn" type="button" name="stock_btn">Check form</button>
<div id="wrapper">

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). Names should be different.

    <input type="number" name="stock" class="form-control" id="id_stock1" required="" data-original-title="" title="">
    <input type="number2" name="stock1" class="form-control" id="id_stock2" required="" data-original-title="" title="">
    <input type="number3" name="stock2" class="form-control" id="id_stock3" required="" data-original-title="" title="">
    <input type="number4" name="stock3" class="form-control" id="id_stock4" required="" data-original-title="" title="">
</div>

/* Latest compiled and minified JavaScript included as External Resource */
    // Initialize tooltip on #id_stock input
    $('#wrapper input').tooltip({
      title: "Please enter address",
      trigger: "manual"
    });

    // Manually hide tooltip when re-clicking the input
    // This can be modified to hide the tooltip whenever you see fit
    $('#wrapper input').each(function() {
        $(this).click(function(e) {
            $(this).tooltip("hide");
        })
    });

    $("#id_stock_btn").click(function() {
      /* Act on the event */
      $('#wrapper input').each(function() {
          if(!$(this).val())
          {
            $(this).tooltip("show");  // Show tooltip
          }
          else {
            //Do Some Other Stuff
          }
      })

    });