Not halting submit on API call error

Workflow Automation Expert

I would like to halt the form submission, if booking reference given has already been entered. The API call is being made to validate the data, and error returned - resulting in the error message is being displayed. However, the form data still continues to be submitted, creating the record.

bookingsEditor.on('preSubmit', function (e, o, action) {
    if (action !== 'remove') {
        let bookRef = this.field('booking.reference')

         if (!bookRef.isMultiValue()) {
                if (!bookRef.val()) {
                    bookRef.error('A booking reference must be entered.');
                } else {
                  $.get("_/api/validate/booking?ref=" + bookRef.val())
                    .done(function(msg) {
                     // Booking reference not already used
                  }).fail(function(msg) {
                    bookRef.error('This booking reference has been used already.');  
                    return false;
                  })  
                }
         }

       if (this.inError()) {
          error_found = true;
            return false;
        }
    }
});

allan

Your return false; is being done inside the fail function, not the preSubmit event handler. The upshot is that the preSubmit event handler returns undefined and thus is allowed to pass. The inError() check doesn't work as the Ajax is async, so the check happens before the error message has been set!

What you have to do here is return a Promise.

bookingsEditor.on("preSubmit", function (e, o, action) {
  if (action !== "remove") {
    let bookRef = this.field("booking.reference");

    if (!bookRef.isMultiValue()) {
      if (!bookRef.val()) {
        bookRef.error("A booking reference must be entered.");
        return false;
      } else {
        return new Promise((resolve, reject) => {
          $.get("_/api/validate/booking?ref=" + bookRef.val())
            .done(function (msg) {
              // Booking reference not already used
              resolve();
            })
            .fail(function (msg) {
              bookRef.error("This booking reference has been used already.");
              reject();
            });
        });
      }
    }
  }
});

Allan

Workflow Automation Expert

Thanks Allan,

Not really an expert on Promises, but was getting an Uncaught (in promise) Error as the above code you advised was not handling the rejection. Altered the code as follow to get it working.

bookingsEditor.on('initSubmit', function (e, action) {
  if (action !== 'remove') {
    let bookRef = this.field('booking.reference')
    return new Promise((resolve, reject) => {
          $.get("_/api/validate/booking?ref=" + bookRef.val())
            .done(function (ref) {
              resolve();
            })
            .fail(function (ref) {
              bookRef.error("Booking reference is unavailable.");
              reject();
            });
      }).then(result => {
      return true
      }).catch(error => {
      return false
      })
  }
});