Why HTML5 required field is not mandatory, if form posted to two different pages using JavaScript?

Question

I'm using the form that can be seen below. Since I added a double post function based on JavaScript, required fields are not mandatory anymore and I can submit the form without filling in the required fields.

Here is my form:

<form name="Form1" method="post" >
<table>
      <tr>
        <td style="text-align:left;">N° de contrat</td>
         <td>:</td>
         <td><input type="text" name="nbcontrat" required class="tdtr"/></td>
    </tr>       
    <tr> 
        <td></td>
            <td></td>
            <td><INPUT type="button" value="Enregistrer" class="btn btn-lg btn-success btn-block" onclick="OnButton1(); OnButton2();">
            </td>           
    </tr>
</table>
</form>

And my JavaScript:

function OnButton1()
{
    document.Form1.action = "form1.php"
    // document.Form1.target = "_blank";    // Open in a new window

    document.Form1.submit();             // Submit the page

    return true;

}

function OnButton2()
{
    document.Form1.action = "an1.php"
    document.Form1.target = "_blank";    // Open in a new window

    document.Form1.submit();             // Submit the page

    return true;
}

How do I make these fields required again?

Answer 1

Submitting a form with JavaScript bypasses the validation check.

You can perform it manually with checkValidity.

if (myForm.checkValidity()) {
    myForm.submit();
}