Is it possible to detect form submit fail in javascript?

Question

I have this simple form:

<form action="www.faildomain.com">
    <input name="foo" value="bar">
    <button type="submit">Submit</button>
</form>

In my case, the action will fail. But could it be that this is a valid action, but the user has experienced a connection error?

Are there different Javascript events generated or os this out of my control?

Answer 1

This is out of your control if you don't handle the submit event. Basically, when you click on the submit button, your browser will do an HTTP POST request to your "action" URL.

If you want to check your inputs validity before sending it, what you'll have to do is to handle the form submission event: submit.

const myForm = document.getElementById('my-form');

// Add a listener to the submit event
myForm.addEventListener('submit', function (e) {
    const errors = [];
    
    // Check inputs...

    if(errors.length) {
         e.preventDefault(); // The browser will not make the HTTP POST request
         return;
    }
});

But, even with this code, you'll never know if the user has a network problem.

The only way you can check that kind of errors is by doing an asynchronous call to your backend route using Ajax (it's just an HTTP POST request, called asynchronously). For example, using jQuery:

$("#myForm").on("submit", function(e) {
    event.preventDefault();

    const data = {};

    // Get data from form...

    // Stop form from submitting normally
    $.post("www.faildomain.com", data)
      .done(function(data) {
          // No problem
      },
      .fail(function (jqXHR, textStatus) {
          // An error occured (the server responded with an error status, network issue, ...)
          // More information about the error can be found in jqXHR and textStatus
      },
      .always(function () {
          // This method is always executed whether there were an error or not
    });

Answer 2

If you Submit it using Ajax you can get it via response headers. Take a look at this plugin:

http://malsup.com/jquery/form/#ajaxForm

it will help you a lot because it already have a method error for that.