How to display error on the same page when an error is returned by a form?

I have built a login form using below code.

I am using a CGI version CGIDEV2 native to IBMi series. I am Validating the userid and password in the flower.cgi program. If the userid and password are validated, I am loading another html file to show a table. This works flawlessly.

If the userid and password are wrong, I am returning out of the program without writing anything. This results in a 500 Internal server error.

I want to capture this 500 Internal server error using javascript. I have tried using ajax but was not successful as I have limited understanding of javascript.

What could be the best way to achieve this?

<form method="POST" action="/nature/flower.cgi">
  <!-- Username input -->
  <div class="form-outline mb-4">
    <input type="text" name="userid" id="form3Example3" class="form-control form-control-lg" style="text-transform:uppercase" placeholder="Enter a valid IBMi UserID" />
    <label class="form-label" for="form3Example3">IBMi UserID</label>
  </div>
  <!-- Password input -->
  <div class="form-outline mb-3">
    <input type="password" name="passwd" id="form3Example4" class="form-control form-control-lg" placeholder="Enter password" />
    <label class="form-label" for="form3Example4">Password</label>
    <br>
  </div>
  <div class="d-flex justify-content-between align-items-center">
    <!-- Checkbox -->
    <div class="form-check mb-0">
      <input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" />
      <label class="form-check-label" for="form2Example3">Remember me</label>
    </div>
    <a href="#!" class="text-body">Forgot password?</a>
  </div>
  <div class="text-center text-lg-start mt-4 pt-2">
    <button type="submit" class="btn btn-primary btn-lg" style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
  </div>
</form>

Solution

You can't capture an error from a URL the browser is navigating to.

The only way you could would be if you replaced the normal form submission with Ajax (in which the request is made and the response processed with JavaScript).

Generally speaking, if you were going to do that you would also want to rewrite the CGI program so it output structured data (e.g. as JSON) instead of semantic data (HTML).

It would not be a particularly small undertaking. You said you had tried it, which probably gives you some idea of the scope of it (i.e. far outside the scope of a Stackoverflow question).

A more sensible approach would almost certainly be to track down the cause of the 500 error and change the CGI program so it would capture it itself.