Force HTML form validation via JavaScript

Question

I have created a HTML form which has two buttons (instead of a submit button), each programmatically sending the form to a unique form action address.

<form id="formExample">
<input type="text" id="input1" required>
<label type="button" onClick="form1()">Form Action 1</label>
<label type="button" onClick="form2()">Form Action 2</label>
</form>

The scripts:

form = document.getElementById("formExample");

function form1() {
    form.action="example1.php";
    form.submit();
}
function form2() {
    form.action="example2.php";
    form.submit();
}

Work well, responding to which button you press. However, the same html form validation that worked before (when using a 'submit' button), no longer shows a hint and the form sends regardless of whether there is input or not.

I have read that because I am calling the form.submit() programmatically, it bypasses the onSubmit() function of a form, which is where the validation takes place.

My question is: Can I programmatically force the onSubmit() so that I get the validation pop up? I must make clear that I am NOT wanting to create a JavaScript form validation, i.e. using an alert; rather, use JavaScript to enforce the HTML validation as found here, when you click submit: https://jsfiddle.net/qdzxfm9u/

Answer 1

Maybe something like this :

var form = document.getElementById("formExample");

function form1() {
  form.action="example1.php";
}

function form2() {
  form.action="example2.php";
}

<form id="formExample">
  <input type="text" id="input1" required>
  <input type="submit" onClick="form1()" value="Form Action 1" />
  <input type="submit" onClick="form2()" value="Form Action 2" />
</form>

Answer 2

You can merely change your button's type to submit and drop the form.submit() from your JS part.

So the HTML part becomes:

<form id="formExample">
<input type="text" id="input1" required>
<button type="submit" onClick="form1()">Form Action 1</button>
<button type="submit" onClick="form2()">Form Action 2</button>
</form>

This way, clicking any button does submit by itself, but before is executed the JS part:

form = document.getElementById("formExample");

function form1() {
    form.action="example1.php";
}
function form2() {
    form.action="example2.php";
}

---

EDIT

Warning: I originally based my solution on a copy of the OP HTML part, where the "pseudo-buttons" used a strange element <label type="input"...>, so I read (too quickly) as if it was <button type="button"...> and simply changed type from input to submit!
This way, it couldn't work as expected.

It is now corrected in the above code.