使用JavaScript submit() 函数时如何运行 HTML5 表单验证？

Question

当有这样的输入时：

<form action="go" method="post">
    <input name='submitthingy' required>
</form>

它应该只有在字段被填写时才能提交。当我使用这样的提交按钮时这有效：

<button type='submit'>Click Me</button>

它会出现一个小弹出窗口，要求填写该字段。但是，当我用 javascript 提交时，像这样：

document.querySelector('form').submit();

它提交发件人但不验证该字段是否已先填写。我应该怎么做？

Answer 1

尝试调用提交按钮的点击操作而不是表单的提交操作：

document.getElementsByTagName("button")[0].click();

Answer 2

你可以给按钮一个id然后调用 document.getElementById("btnsubmit").点击()

如果您不希望显示按钮，请添加显示 none。

<button id='btnsubmit' type='submit' style='display:none;'>Click Me</button>

Answer 3

处理此问题的 JavaScript 方法是使用 constraint validation API 在用户与之交互时检查每个字段，然后在表单提交时再次检查。

使用 keyUp 事件侦听器监视每个字段的更改以检查其有效性，然后使用 submit 事件侦听器在发送前再次检查每个字段的值。下面我创建了一个示例，无耻地从链接的 MDN 页面中提取并仅进行了轻微编辑。

您的表单可能如下所示：

<!-- form disables HTML validation -->
<form novalidate>
    <label for='submitthingy'>
        <!-- input field and error span are in the same label -->
        <input id='submittable' name='submitthingy' required>
        <!-- error to be called by JavaScript -->
        <span class='error' aria-live='polite'></span>
    </label>
<button type='submit'>Click Me</button>
</form>

你的 JS 是这样的：

var form  = document.getElementsByTagName('form')[0];
var submitthingy = document.getElementById('submittable');
var error = document.querySelector('.error');

// One of these for each field, or you could DRY it up somehow
email.addEventListener("keyup", function (event) {
  if (submitthingy.validity.valid) {
    error.innerHTML = "";
    error.className = "error";
  }
}, false);
form.addEventListener("submit", function (event) {
  if (!submitthingy.validity.valid) {
    error.innerHTML = "This field is not valid per CSS pseudo class!";
    error.className = "error active";

event.preventDefault();
  }
}, false);

然后您可以使用 CSS 设置错误消息的样式以默认隐藏它们，然后应用基于 class(es) error active.

的样式

Answer 4

根据我的评论说明 API：

var myform = document.getElementById('myform');
var fields = myform.querySelectorAll('input,textarea,select');
var test = document.getElementById('test');

test.addEventListener('click', function(evt) {
  var valid = Array.prototype.every.call(fields, function(field) {
    return field.checkValidity();
  });
  test.style.backgroundColor = valid ? "green" : "red";
});

<form id="myform">
  <p>
    <label for="dog">Dog:</label>
    <input pattern="Dog" id="dog" name="dog">
  </p>
</form>
<button id="test">Test</button>

使用JavaScript submit() 函数时如何运行 HTML5 表单验证？

How to run HTML5 form verification when using JavaScript submit() function?

html

javascript

forms

input

form-verification