Html Question posted in
Some basic documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    I don’t get why you would have a delay when form fields are empty. If it is just a matter of validating the form, you should use the build-in form validation. If all the required fields have the attribute required, the form will only submit it all the form fields are valid — as default, not empty.

    Here I set the required attribute and have an eventlistner for the invalid event. The callback function will display an alert with the title of the field. I would suggest that you find another way to give the user feedback, than using an alert — display a hidden element with the feedback instead.

    document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
  alert(e.target.title);
  e.target.focus();
}, true);
    <form name="form01" method="POST" action="https://example.com">
  <input type="text" name="first_name"
    title="Please enter a value for the &quot;First Name&quot; field."
    required>
  <input type="text" name="last_name"
    title="Please enter a value for the &quot;Last Name&quot; field."
    required>
  <button type="submit">Submit</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search