Today I learned (well, technically, a few days ago, the week has been a lot), that the web platform supports a requestSubmit method. Since the beginning of time (or the beginning of JavaScript), we've been able to submit forms like so:
var myForm = document.getElementById('theform');
myForm.submit();
I intentionally used getElementById
there as a reminder of what we had before jQuery. Given that, why do we need another method? Two important requests.
Reason the First #
When using submit
, any validation of form fields is completely skipped. Consider this form:
<form method="post" id="theForm">
<p>
<label for="name">Name</label>
<input id="name" name="name" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<input type="submit">
</p>
</form>
I've got two fields, both required, with the second field using type email
. If you hit submit, the form will stop itself from POSTing and show errors, but if you submit with JavaScript, that validation is completely ignored.
I added two more buttons to my HTML:
<p>
<button id="testSubmit">Test submit()</button>
<button id="testRequestSubmit">Test requestSubmit()</button>
</p>
And wrote some quick JavaScript to demo this:
const $form = document.querySelector('#theForm');
document.querySelector('#testSubmit').addEventListener('click', () => { $form.submit() });
document.querySelector('#testRequestSubmit').addEventListener('click', () => { $form.requestSubmit() });
Clicking the first button immediately shows that validation is ignored. Clicking either the main submit button in the form or the tester button shows validation working.
Reason the Second #
Not only is validation ignored with submit()
, any submit handler on the form itself is completely ignored. I added this:
$form.addEventListener('submit', e => {
console.log('submit fired on form');
e.preventDefault();
});
And again, submit()
ignores it and requestSubmit()
runs it fine. I'm mostly sure I remember this aspect of submit()
, but it's definitely been a while since I've thought about it.
Anyway, everyone loves the web platform. (Except Apple.) Here's a CodePen showing this in action if you want to see for yourself. (Which is 100% why most of my blog posts exist.)
See the Pen requestSubmit test by Raymond Camden (@cfjedimaster) on CodePen.