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, MDN guide. — Amadan
– Amadan, Commented Mar 25, 2016 at 1:30

markasoftware · Accepted Answer · 2016-03-25 02:00:56Z

1

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

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

edited Mar 25, 2016 at 2:00

markasoftware

12.7k8 gold badges47 silver badges72 bronze badges

answered Mar 25, 2016 at 1:33

Newbie

2871 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

markasoftware Over a year ago

The other answers are a bit more "elegant", but on the other hand this ones simple and does exactly what I want it to

Chris Moore · Accepted Answer · 2016-03-25 01:37:28Z

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, 2016 at 1:37

Chris Moore

111 bronze badge

Comments

Amadan · Accepted Answer · 2016-03-25 01:47:27Z

1

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>

answered Mar 25, 2016 at 1:47

Amadan

200k23 gold badges253 silver badges321 bronze badges

Comments

dotZak · Accepted Answer · 2016-03-25 01:58:06Z

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.

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related