Question

我在表单中提交了一个按钮，只是在它外面的一个普通按钮。我想验证一个表单：

   function myButtonHandler(evt) {
    if (myForm.checkValidity()) {
      alert("yes");
    } else {
      alert("no");
    }
  }

当我点击按钮时，当输入元素无效时，这并没有显示标准错误提示 - 当我点击提交按钮时，浏览器会显示这些提示。当表单无效时，如何在单击普通按钮时弹出这些验证消息？

<form id="my_form">
  <input type="text" placeholder="Name" required="true"/>
  <input type="submit" id="submit" value="go" />
</form>

没有jquery。

Answer 1

您需要将您显示的代码添加到设置为普通按钮的click事件回调的函数中：

var myForm = document.querySelector("form");         // reference to form
var btn = document.querySelector("[type='button']"); // reference to normal button

// Set up click event handling function for normal button
btn.addEventListener("click", function(){
  if (myForm.checkValidity()) {
    alert("yes");
  } else {
    alert("no");
  }
});

<form>
  <input type="text" required>
  <button type="submit">submit</button>
</form>

<button type="button">Check Validity</button>

如果您只想显示正常浏览器的验证错误，可以将第二个按钮设为提交按钮。只要您将按钮绑定到具有form属性的表单，按钮就可以在表单之外。

<form id="theForm">
  <input type="text" required>
  <button type="submit">submit</button>
</form>

<button type="submit" form="theForm">Check Validity</button>

如何验证html5表单并显示按钮单击时的错误提示？

1 个答案: