Question

拥有HTML（部分）：

<div class="modal-write-us">
  <form class="modal-write-us-form" action="" method="post">
    <label>
      <input type="text" name="user-name" required>
    </label>
    <label>
      <input type="text" name="e-mail" required>
    </label>
    <label for="text-field"></label>
    <textarea name="text" rows="5" id="text-field" required></textarea>
  </form>
  <div class="modal-write-us-button">
    <button class="btn btn-red" type="submit">Submit</button>
  </div>
</div>

如果提交的表单有空字段/字段，我需要为div.modal-write-us添加类“modal-error”。

JS：

var modalWriteUs = document.querySelector('.modal-write-us');
var form = modalWriteUs.querySelector('form');
var userName = modalWriteUs.querySelector('[name=user-name]');
var eMail = modalWriteUs.querySelector('[name=e-mail]');
var textArea = modalWriteUs.querySelector('[name=text]');

form.addEventListener('submit', function(event) {
  if (!userName.value || !eMail.value || !textArea.value) {
    event.preventDefault();
    modalWriteUs.classList.add('modal-error');
  }
});

但是没有添加课程。我的错误在哪里？

Answer 1

首先，您需要将提交按钮放入表单中然后，更改提交按钮以输入：

<input class="btn btn-red" type="submit">Submit</input>

现在你需要在你的JS中做一些修复。
在atttribute选择器中使用双引号：

querySelector('[name="user-name"]')

属性required不允许提交空表单，因此您的提交回调永远不会运行。
如果您删除了required属性，您的代码就可以运行。

Answer 2

如果您将<button class="btn btn-red" type="submit">Submit</button>放在<form>内，它应该有效。

见工作Plunker。

<div class="modal-write-us">
  <form class="modal-write-us-form" action="" method="post">
    <label>
      <input type="text" name="user-name" required>
    </label>
    <label>
      <input type="text" name="e-mail" required>
    </label>
    <label for="text-field"></label>
    <textarea name="text" rows="5" id="text-field" required></textarea>
    <div class="modal-write-us-button">
      <button class="btn btn-red" type="submit">Submit</button>
    </div>
  </form>
</div>

编辑：更多解释here：

用于创建控件的元素通常在FORM 元素中显示，但在用于构建用户界面时，也可能出现在FORM元素声明之外。这将在内部事件一节中讨论。请注意，表单外部的控件无法成功控制。

为什么是element.classList.add（'class-name'）;不管用？

2 个答案: