Prevent submitting ajax-form in "submitting" state.

[suexID]

Hi,

I'm working on form consist of traditional inputs and polymer components and I've found that the easiest way to submit this form is to attach an event handler to ajax-form's submitting event and concatenate the object named criteria bound to the polymer elements on the fly. However I want to implement a basic check and if the criteria object is empty I'd display a notification to the user and prevent the form from submitting.

if (formCriteria.length > 0) {
    event.detail.formData.criteria = formCriteria;
} else {
    displayFlashMessage(errormsgs.criteria, ERROR_MISSING);
    event.preventDefault();
    return false;
}

The code above works like a charm except that the form gets submitted. Any thoughts on how to prevent the form from submitting? Should I do something differently?

[rnicholus]

I've found that the easiest way to submit this form is to attach an event handler to ajax-form's submitting event and concatenate the object named criteria bound to the polymer elements on the fly.

I'm not sure I understand why you are doing this. I'm also not sure what this criteria object is.

However I want to implement a basic check and if the criteria object is empty I'd display a notification to the user and prevent the form from submitting.

Now I'm even more confused. Why aren't you just using the native HTML form constraints API?

[suexID]

The actual content of the criteria object isn't that important. I'm submitting data to an endpoint in application/json format and I found that the easiest way to handle data from start to end is to keep the data in an object, bind it to microtemplates and on form submission concatenate to the formData object of the event which already contains values of vanilla HTML inputs.

The important thing here is that the criteria object is a complex object and couldn't be validated using the form constraints API.

My question was that is there any way to abort the AJAX request after the submitting event has been triggered?

[rnicholus]

is there any way to abort the AJAX request after the submitting event has been triggered

Currently, no. But that would be easy to implement.

[rnicholus]

This is complete in the 2.0.0 staging branch, and will be released as part of ajax-form v2.0.

In order to prevent the form from being submitted, you must invoke the preventDefault() function on the event passed in to your "submitting" handler function.