Question

我有一个表单，当单击按钮时，我试图遍历检查空字段，然后做一些事情，即警报，然后专注于空字段。

我正在执行此操作，但是似乎完全禁用了该页面？

检查后会转到AJAX通话，所以也许我遗漏了什么？

表单的HTML是

$(document).ready(function() {
  $('#check').on('click', function() {
    $(".form-control").each(function() {
      if (!$(this).val()) {
        var status_id = $(this).attr("id");
        var status = $(this).attr("data-name2");
        document.getElementById("status_id").focus();
        alert(status);
        return false;
      }
    });
  });

  // ... some unrelated code here
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Trading Name(s) * </div>
<input type="text" id="trading_name" data-name="trading_name" data-name2="Please enter your trading name" class="ad1 form-control" />

<div>Registered Company Name * </div>
<input type="text" id="company_name" data-name="company_name" data-name2="Please enter your company name" class="ad1 form-control" />

<button type="button" id="check" class="btn btn-check">CHECK</button>

在此先感谢您的帮助或建议

Answer 1

这是代码中的一个小错误。您正在将@import "semantic.min.css";视为代码中的字符串：

status_id

在查看代码的同时，您似乎希望将其作为局部变量：

document.getElementById("status_id").focus();

因此解决方法是将代码更改为：

var status_id = $(this).attr("id");

或者，通常，将整行替换为// status_id - the string, i.e. ID of the element in concern document.getElementById(status_id).focus();之类的内容，因为this.focus()将引用所关注的元素。

这是修改后的代码段：

this

$(document).ready(function() {
  $('#check').on('click', function() {
    $(".form-control").each(function() {
      if (!$(this).val()) {
        var status_id = $(this).attr("id");
        var status = $(this).attr("data-name2");
        document.getElementById(status_id).focus();
        // OR - this.focus();
        alert(status);
        return false;
      }
    });
  });

  // ... some unrelated code here
});

更新：

To show tooltips on error，您需要初始化工具提示<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Trading Name(s) * </div> <input type="text" id="trading_name" data-name="trading_name" data-name2="Please enter your trading name" class="ad1 form-control" /> <div>Registered Company Name * </div> <input type="text" id="company_name" data-name="company_name" data-name2="Please enter your company name" class="ad1 form-control" /> <button type="button" id="check" class="btn btn-check">CHECK</button>，然后再打开$(this).tooltip()。同样，如果您需要在模糊或任何其他事件下将其隐藏，则可以致电$(this).tooltip('open')。

这是一个例子：

$(this).tooltip('close')

$(document).ready(function() {
  // Set the title using data-name2
  $(".form-control").each(function() {
    var tooltipText = $(this).data("name2");
    $(this).attr("title", tooltipText);
  });

  $('#check').on('click', function() {
    $(".form-control").each(function() {
      if (!$(this).val()) {
        var status_id = $(this).attr("id");
        var status = $(this).attr("data-name2");
        document.getElementById(status_id).focus();
        // OR - this.focus();
        // alert(status);

        $(this).tooltip();
        $(this).tooltip("open");
        
        return false;
      } else {
        $(this).tooltip();
        $(this).tooltip("close");
      }
    });
  });

  // ... some unrelated code here
});

浏览表单并找到空白字段

1 个答案: