CODEWITHSUNDEEP
javascripthtml
James Lee
James Lee

Reputation: 315

Keeping browser HTML form validation when submitting with javascript?

Is it possible to keep the default HTML validation if submitting via Javascript?

What I mean is that, if I submit a form using this JS method:

document.getElementById("mc-embedded-subscribe-form").submit();

How do I keep the defualt error messages thrown by the browser?

enter image description here

One workaround I thought of is using this:

<form onSubmit="return somefunction()">

But because the API returns the success inside a closure function, I can't use this method.

Upvotes: 7

Views: 1019

Answers (4)

nulll
nulll

Reputation: 1603

form attribute

this solution avoids javascript, let's say that #my-btn is a button outside the form #mc-embedded-subscribe-form, you could just set on it

<button id="my-btn" type="submit" form="mc-embedded-subscribe-form">Go!</button>

requestSubmit()

with vanilla javascript you could call requestSubmit()

const form = document.getElementById('mc-embedded-subscribe-form');
form.requestSubmit();

the hackish solution

you could put an hidden submit button in the form and then trigger the click event on it

<form id="mc-embedded-subscribe-form">
    <button id="real-btn" type="submit" style="visibility: hidden"></button>
</form>

<button id="my-btn">Go!</button>

const btn = document.getElementById('my-btn');
const btn_real = document.getElementById('real-btn');
btn.addEventListener('click', (e) => {
    e.preventDefault();
    btn_real.click();
});

Upvotes: 0

Lee Kowalkowski
Lee Kowalkowski

Reputation: 11751

You do not need to use form.submit() ever. Do it properly (onsubmit), or use click() on the submit button.

Doing it properly...

I can't think of a good reason to automatically submit a visible form. To submit data without user-interaction use XMLHttpRequest or WebSockets.

A form is submitted by user interaction (e.g. pressing its submit button), so there is no need to use JavaScript to submit a form. It is more likely that you need JavaScript to prevent a form submission, by returning false in the onsubmit event handler.

...or use click()

To programatically invoke HTML5 validation (and also any JavaScript onsubmit event handlers attached to the form), you can call the click() function of a submit button that belongs to the form.

If the form has no submit button, you can create a temporary one:

var form = document.getElementById("mc-embedded-subscribe-form");
var button = document.createElement('input');
button.type = 'submit';
button.style.display = 'none';
form.appendChild(button);
button.click();

Forms with multiple submit buttons should each have name attributes so the server can detect which button the user clicked. You can 'click' these buttons using form.buttonName.click().

Upvotes: 0

C3roe
C3roe

Reputation: 96250

HTML5 has also specified a JS API that you can use to interact with forms/elements in regard to their validation status: https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api

So the easiest way to achieve this would be to call the checkValidity method of your form, and only submit it when this returns true.

Something like this:

function submitIfValid() {
  var form = document.getElementById("mc-embedded-subscribe-form");
  if(form.checkValidity()) {
    form.submit();
  }
  else {
    //
  }
}

and then you would just call that function when you want to trigger form submission.

Upvotes: 3

Bakhtawar Gill
Bakhtawar Gill

Reputation: 439

according to my understanding of your question, html validation is not enough to halt submission, you have to validate required inputs in javascript too before submitting.

e.g 

if (!empty(username)) {
    document.getElementById("mc-embedded-subscribe-form").submit();
}

Upvotes: 2

Related Questions