Javascript AJAX: Ensures that a promise-dependent form submission will always be successful

Question

Javascript AJAX: Ensures that a promise-dependent form submission will always be successful

At last, I was able to achieve this:

function validate(data_to_validate, url, section)
{
        var datastr = "section=" + section + "&data=" + data_to_validate;
        return new Promise(function(resolve, reject) {
                $.ajax({
                        type:'GET',
                        url:url,
                        data:datastr,
                        success:function(response) { resolve(response); },
                        error:function(response) { reject(response); }
                });
        });
}

async function verify_submission()
{
        init(); // initializes some global variables
        personal_errors_count = 0; // count errors

        var dni_ctl = document.getElementById("frm_employee_dni");
        var dni = dni_ctl.value;

        dni_ctl.style.borderColor = "black";
        dni_ctl.style.backgroundColor = "none";


        const status = await validate(dni, validation_url, "dni")
                .then(output => validateStatus(dni_ctl, output)) // validateStatus() updates color and form control title
                .catch(error => validateStatus(dni_ctl, "error"));
        $.when(status).done(console.log("Errors: " + personal_errors_count));
        return false; // set for testing purposes, but always ignored.
}

Whenever the onsubmit event occurs, async function check_submit() is triggered. The validate(...) function returns a promise, which is handled with .then() and .catch() to manage both outcomes. However, even with incorrect fields, the form gets submitted.

I suspect that the form always gets submitted due to faulty code somewhere, but identifying it has been challenging.

Appreciate any assistance!

javascript ajax promise onsubmit

Answer 1

Answer №1

Let's say we have a form that needs validation using a promised-based approach. The function validar() performs the validation and takes about 3 seconds to complete (considering multiple fields). However, when implemented as shown below, it fails! Let's delve into the comments to understand why.

<form action="google.com" id="frm">
  <input id="txt">
  <button type="submit">submit</button>
</form>

<script>
  document.getElementById('frm').onsubmit = () => {
    var check = check_submit();
    console.log(check); //Promise {<pending>}
    console.log(check ? true : false) // evaluates to true! (check ? true : false) <-- true
    //The browser proceeds with the default behavior of submitting to google.com
  }

  function validar() {
    return new Promise(function(resolve, reject) {
      setTimeout(() => resolve(false), 3000)
    });
  }

  async function check_submit() {
    var result = validar(); // <-- this line DOES NOT WAIT for the promise from validar to be resolved 
    // instead, it uses the current value (Promise {<pending>}) immediately and returns it!
    return result;
  }
</script>

So how can we make it work properly? It's simple, just prevent the default behavior by unconditionally returning false in the onsubmit event and manually submit the form (if valid) once the promise is resolved.

<form action="google.com" id="frm">
  <input id="txt">
  <button type="submit">submit</button>
</form>

<script>
  document.getElementById('frm').onsubmit = () => {
    check_submit(); //<-- will handle our form submission process
    return false; //unconditionally preventing default behavior
  }

  function validar() {
    return new Promise(function(resolve, reject) {
      setTimeout(() => resolve(false), 3000)
    });
  }

  async function check_submit() {
    var result = await validar(); //<-- this line NOW WAITS (using await) for validar's promise to be resolved
    if (result) {
      alert('Submitting form as validar returned true')
      document.getElementById('frm').submit(); // manually submit since promise value was true
    } else
      alert('meh')
  }
</script>

Answer 2

Let's say we have a form that needs validation using a promised-based approach. The function validar() performs the validation and takes about 3 seconds to complete (considering multiple fields). However, when implemented as shown below, it fails! Let's delve into the comments to understand why.

<form action="google.com" id="frm">
  <input id="txt">
  <button type="submit">submit</button>
</form>

<script>
  document.getElementById('frm').onsubmit = () => {
    var check = check_submit();
    console.log(check); //Promise {<pending>}
    console.log(check ? true : false) // evaluates to true! (check ? true : false) <-- true
    //The browser proceeds with the default behavior of submitting to google.com
  }

  function validar() {
    return new Promise(function(resolve, reject) {
      setTimeout(() => resolve(false), 3000)
    });
  }

  async function check_submit() {
    var result = validar(); // <-- this line DOES NOT WAIT for the promise from validar to be resolved 
    // instead, it uses the current value (Promise {<pending>}) immediately and returns it!
    return result;
  }
</script>

So how can we make it work properly? It's simple, just prevent the default behavior by unconditionally returning false in the onsubmit event and manually submit the form (if valid) once the promise is resolved.

<form action="google.com" id="frm">
  <input id="txt">
  <button type="submit">submit</button>
</form>

<script>
  document.getElementById('frm').onsubmit = () => {
    check_submit(); //<-- will handle our form submission process
    return false; //unconditionally preventing default behavior
  }

  function validar() {
    return new Promise(function(resolve, reject) {
      setTimeout(() => resolve(false), 3000)
    });
  }

  async function check_submit() {
    var result = await validar(); //<-- this line NOW WAITS (using await) for validar's promise to be resolved
    if (result) {
      alert('Submitting form as validar returned true')
      document.getElementById('frm').submit(); // manually submit since promise value was true
    } else
      alert('meh')
  }
</script>

Javascript AJAX: Ensures that a promise-dependent form submission will always be successful

Answer №1

Similar questions

Focusing on the final (but not ultimate) elements within a specified tag

Is it achievable to assign a various value to the data attribute of a transition object in Ember.js?

Optimizing Your CSS Loading Process for Production Environments

Is sendFile causing an error due to an invalid JSON format?

What is the process of setting a function as a property value in the Vuex State of an object from a component?

What is the best method for converting input files into FormData?

Incorporating append and clone through a loop with jQuery

Convenient methods in Three.js for easily detaching and attaching character weapons within a scene

creating dynamic applications using ant framework

Display data from two arrays in real-time

Is Moment.js displaying time incorrectly?

Utilizing AngularJS repeaters to pass information into Foundation modals

How can I efficiently store and access DOM elements in my React application to avoid constant re-fetching?

"Is there a virtual keyboard available that supports multiple inputs and automatically switches to the next input when the maximum length

Can you help me figure out what is causing an issue in my code? Any tips on removing a collection from MongoDB

Transforming the express app object into a data type instead of a regular variable

Verifying the presence of a value within an SQL table

Attempting to retrieve div measurements in vh/vw units rather than pixels

What is the best way to allow all authenticated routes to display the Devise ajax Login form?

The conditional rendering issue in Mui DataGrid's renderCell function is causing problems