Question

我有这样的表格：

<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个必需输入，我也没有收到任何警报。

为什么会这样？

Answer 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');
  });
});

Answer 2

Chromes内置浏览器验证阻止我的代码执行。将novalidate添加到我的表单可以解决问题。

find（）。each（）找不到任何东西

2 个答案: