Question

输入如下输入时：

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

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

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

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

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

它提交from但不验证该字段是否首先填充。我该怎么做？

Answer 1

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

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

Answer 2

您可以为该按钮指定ID并致电的document.getElementById（＆＃34; btnSubmit按钮＆＃34）。单击（）

如果您不想显示按钮，请添加display none。

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

Answer 3

从我的评论中说明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>

Answer 4

处理此问题的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设置错误消息的样式以默认隐藏它们，然后根据类error active应用样式。

如何在使用JavaScript submit（）函数时运行HTML5表单验证？

4 个答案: