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

Question

When having an input such as this:

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

It should only be able to submit when the field is filled in. This works when I use a submit button like this:

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

It makes a small popup appear, asking to fillin the field. However, when I submit it with javascript, like this:

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

It submits the from but does not verify that the field is filled in first. How should I do this?

Answer 1

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

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

Answer 2

You can give the button an id and call document.getElementById("btnsubmit").click()

If you would prefer not to display the button add a display none.

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

Answer 3

Illustrating the API from my comment:

 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

The JavaScript way to handle this would be to use the constraint validation API to check each field as the user interacts with it, then again on form submit.

Use a keyUp event listener to watch each field for changes to check for their validity, then a submit event listener to check the value of each field again before sending. Below I've created an example shamelessly lifted and only lightly edited from the linked MDN page.

Your form might look something like this:

<!-- 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>

And your JS like this:

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);

Then you can style your error messages using CSS to hide them by default, then apply styles based on the class(es) error active .