Question

<form id="myForm"> 
  <input type="text" required />
  <button class="btn btn-primary" id="next-button"  type="submit">Next</button>
</form>

使用javascript代码

var nextButton = document.getElementById("next-button");
  nextButton.addEventListener("click", function(e){
    e.preventDefault();
    console.log("Next Button Clicked!");
    // Do some other work.
    form.submit();
  });

如果我运行此代码，且文本字段为空，则表单提交不应该这样做。如果我删除“提交”按钮中的“ ID”字段，则验证工作正常。我这是什么问题或如何在javascript中手动验证表单？

Answer 1

如果您不希望表单提交，除非您明确要求这样做，请将type="submit"标记中的type="button"替换为<button>。单击后，前者会自动提交表单。

Answer 2

您可以通过以下方式检查表格的有效性：

var nextButton = document.getElementById("next-button");
var form = document.getElementById("myForm");
  nextButton.addEventListener("click", function(e){
    if(form.checkValidity()) {
      e.preventDefault();
      alert("Next Button Clicked!");
      // Do some other work.
      form.submit();
    }
  });

Answer 3

您在这里发生了几件事。

如果我运行此代码，且文本字段为空，则表单提交不应该这样做。如果我在“提交”按钮中删除> Id字段，则验证工作正常。我这是什么问题？

这是因为您的javascript本质上正在接管并且实际上没有进行任何验证。它防止按钮的默认行为，将消息记录到控制台，然后提交表单。

当您从按钮中删除ID值时，此javascript不运行，因为您告诉它要查找的元素ID不存在。之所以进行验证，是因为现在您的Javascript尚未接管，并且浏览器的本机验证正在输入中放置的“ required”属性中。

您有两条前进的路，可以使用本机浏览器验证https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

或使用javascript构建自己的脚本。（有很多方法可以做到这一点，使用google并使用一些您发现的示例）。

如何在javascript中手动进行表单验证

3 个答案: