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

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?

`submit()` just submits; you need to check them yourself. Constraint validation API [spec](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation#The_HTML5_constraint_validation_API). — Amadan, Mar 25 '16 at 01:30

score 1 · Accepted Answer · edited Mar 25 '16 at 02:00

1

Try to call click action of submit button instead of submit action of the form:

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

edited Mar 25 '16 at 02:00

markasoftware

12,292
8
41
69

answered Mar 25 '16 at 01:33

Newbie

287
1
8

The other answers are a bit more "elegant", but on the other hand this ones simple and does exactly what I want it to – markasoftware Mar 25 '16 at 02:49

score 1 · Answer 2 · answered Mar 25 '16 at 01:37

1

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>

answered Mar 25 '16 at 01:37

Chris Moore

11
1

score 1 · Answer 3 · answered Mar 25 '16 at 01:47

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>

dotZak · Answer 4 · 2016-03-25T01:58:06.797

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.

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

4 Answers4