How to delay form submission of a form which has empty field checks

Question

I have a form with empty field checks and been trying to delay the form submission after the field checks are done unsuccessfully. The below code is for 2 fields only(there are 7 fields).

The field check code is:

<script type="text/javascript">

function FrontPage_Form3_Validator(theForm)
{

  if (theForm.First_Name.value == "")
  {
    alert("Please enter a value for the \"First Name\" field.");
    theForm.First_Name.focus();
    return (false);
  }

  if (theForm.Last_Name.value == "")
  {
    alert("Please enter a value for the \"Last Name\" field.");
    theForm.Last_Name.focus();
    return (false);
  }



  return (true);

}
</script>

The form code is:

<form method="POST" action="https://example.com" onsubmit="return FrontPage_Form3_Validator(this);" name="FrontPage_Form3" id="detailsphp" autocomplete="on">

<input class="textlinesubmit" type="text" name="First_Name" tabindex="1">
<input class="textlinesubmit" type="text" name="Last_Name" tabindex="2">

<input id="submitbutton" class="updatemyordersubmitbutton" type="submit" value="Submit Order" name="B1" tabindex="13" style="width:110px;font-family:arial;height:30px;" onclick="sometrackevent;">

</form>

I just can't figure out how to keep the empty field check and then delay the form submission.

What I have tried:

1. I put a setTimeout around the FrontPage_Form3_Validator function outside of the function and inside of the function but of course this delays the function hence the form just submits without any empty field checks. I even tried to put a setTimeout just around the return (true); like so:

setTimeout(function() {
   return (true);
}, 5000);

But I guess this is not even valid in javascript.

I tried to change the input submit to input button like below but that doesn't even fire the FrontPage_Form3_Validator function:

<input id="submitbutton" class="updatemyordersubmitbutton" type="button" value="Submit Order" name="B1" tabindex="13" style="width:110px;font-family:arial;height:30px;" onclick="FrontPage_Form3_Validator(theForm);sometrackevent;">

or:

<input id="submitbutton" class="updatemyordersubmitbutton" type="button" value="Submit Order" name="B1" tabindex="13" style="width:110px;font-family:arial;height:30px;" onclick="FrontPage_Form3_Validator();sometrackevent;">

To maybe late do something like this:

function mysubmitForm() {
document.getElementById("detailsphp").submit()
}
setTimeout(mysubmitForm, 5000); 

I also tried to change the form code to:

<form method="POST" action="https://example.com" onsubmit="window.setTimeout(function () { return FrontPage_Form3_Validator(this); }, 2000)" name="FrontPage_Form3" id="detailsphp" autocomplete="on">

or:

<form method="POST" action="https://example.com" onsubmit="window.setTimeout(function () { FrontPage_Form3_Validator(this); }, 2000)" name="FrontPage_Form3" id="detailsphp" autocomplete="on">

or:

<form method="POST" action="https://example.com" onsubmit="window.setTimeout(function () { FrontPage_Form3_Validator(); }, 2000)" name="FrontPage_Form3" id="detailsphp" autocomplete="on">

But all of the above doesn't work. And I just tried this:

<script>
    function mysubmitForm() {
        document.getElementById("detailsphp").submit()
    }
    setTimeout(mysubmitForm, 5000); 

</script>

<form method="POST" action="https://transact.nab.com.au/live/hpp/payment" onsubmit="mysubmitForm();" name="FrontPage_Form3" id="detailsphp" autocomplete="on">

And that just fires the mysubmitform function which I also don't understand, doesn't the function need to wait until the onsubmit= event occurs?

Answer 1

Delay the form submission after all validation checks pass, you ensure that users have a chance to see any validation messages and correct errors before the form is submitted to the server. Adjust the delay time using setTimeout as needed based on your specific requirements

function FrontPage_Form3_Validator(theForm)
{
  if (theForm.First_Name.value == "")
  {
    alert("Please enter a value for the \"First Name\" field.");
    theForm.First_Name.focus();
    return false; // Prevent form submission
  }

  if (theForm.Last_Name.value == "")
  {
    alert("Please enter a value for the \"Last Name\" field.");
    theForm.Last_Name.focus();
    return false; // Prevent form submission
  }

  // If all checks pass, delay form submission briefly
  setTimeout(function() {
    theForm.submit(); // Submit the form after a short delay
  }, 1000); // Adjust the delay as needed (100 milliseconds here)

  return false; // Prevent default form submission
}

<form method="POST" action="https://example.com" onsubmit="return FrontPage_Form3_Validator(this);" name="FrontPage_Form3" id="detailsphp" autocomplete="on">

<input class="textlinesubmit" type="text" name="First_Name" tabindex="1">
<input class="textlinesubmit" type="text" name="Last_Name" tabindex="2">

<input id="submitbutton" class="updatemyordersubmitbutton" type="submit" value="Submit Order" name="B1" tabindex="13" style="width:110px;font-family:arial;height:30px;">

</form>