find().each() 没有找到任何东西答案

【问题标题】：find().each() not finding anythingfind().each() 没有找到任何东西
【发布时间】：2016-09-17 00:06:57
【问题描述】：

我有这个表格：

<form method="post" action="#" data-action="ajax.php?method=create" class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-md-2 control-label">Name</label>
        <div class="col-md-8">
            <input name="name" type="text" value="" class="form-control" required>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Location</label>
        <div class="col-md-8">
            <input name="location" type="text" value="" class="form-control" required>
        </div>
    </div>
</form>

我想在这个表单上执行一些基本的验证。但是，我的 find().each() 代码根本不起作用。

代码如下：

$(document).on('submit', '[data-action]', function (event) {
    event.preventDefault();

    var form = $(this);

    // ensure required fields are filled in
    form.find('[required]').each(function() {
        alert('required field found');
    });
});

即使表单显然有 2 个必需的输入，我也没有收到任何警报。

为什么会这样？

【问题讨论】：

HTML 中的提交按钮在哪里？
糟糕，我忘了在问题中添加它。但是是的，表单中有一个提交按钮。

标签： jquery forms find each

【解决方案1】：

您需要在表单标签中添加提交按钮。完成后，您的 JQuery 就可以工作了。

这是Fiddle Demo的链接

HTML

<form method="post" action="#" data-action="ajax.php?method=create" class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-md-2 control-label">Name</label>
    <div class="col-md-8">
      <input name="name" type="text" value="" class="form-control" required>
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">Location</label>
    <div class="col-md-8">
      <input name="location" type="text" value="" class="form-control" required>
    </div>
  </div>
  <input type="submit" value="submit">
</form>

JQUERY

$(document).on('submit', '[data-action]', function (event) {
    event.preventDefault();
  var form = $(this);
  console.log($(this));

  // ensure required fields are filled in
  form.find('[required]').each(function() {
    console.log('required field found');
  });
});

【讨论】：

@kjdion84 - 是的，它确实有效。您需要打开 Chrome 开发人员工具 (F12) 并查看控制台选项卡以查看结果。你会看到我用“console.log()”替换了你的“alert”，这是一种处理调试的不那么突兀的方式。

【解决方案2】：

Chrome 内置的浏览器验证阻止了我的代码执行。在我的表单中添加 novalidate 解决了这个问题。

【讨论】：