Handling a form pre-submission processing – exploring some approaches

Handling a form pre-submission processing – exploring some approaches

Okay, I'm fairly new to JavaScript and will not be talking so much code, as an overview of the approach I need to take. Here is a quick run-down of what I am trying to achieve:

A form contains credit card details, some personal address details and some other unknown fields. On form submit, I want to:

a) tokenise the card details through an AJAX call. b) Validate address fields, some may use AJAX calls and some may use HTML5. c) If nothing fails then the form should be allowed to submit once all the onsubmit triggers are complete. d) If any stage fails – tokenisation, validation etc. – then the form should be prevented from submitting.

I understand I can stop the form from submitting using event.preventDefault on the submit event. However, I only want to do this if any of the triggers fails in their operation. My reasoning is that once that is issued, the only way to get the form to submit will then be to do so programmatically. The problem is, I won't know if there is some other validation rule that wants to prevent the submission, and could end up submitting an invalid form.

There could be any number of form events on the onsubmit trigger, and they will operate in order, one after the other. As soon as any one of them issues event.preventDefault() then I know the form won't get submitted at the end. That makes sense, is a simple concept, and works great for procedural code.

Now my problem. The AJAX credit card tokenisation and some of the validation checks use callbacks to work. From what I understand about JavaScript, there is no way to wait for those callbacks to complete procedurally. e.g. I can't fire off a bunch of AJAX calls and then sleep until they are all finished before continuing. The process will always continue and all I can do is leave a callback behind to be notified once the AJAX is complete.

But, I want to wait until all the AJAX calls have finished before exiting the final onsubmit event, because the moment I do, the form will submit. I want to know whether I need to issue preventDefault before exiting.

Is there a way around this? Without shafting the CPU looping while checking the results of a bunch of promises, is there any way to just wait?

The way I see it solved normally is to issue preventDefault right at the start of the submit event, then take control of the form submission programmatically. I would really like to avoid that, as I have no idea if there are other incomplete asynchronous things going on in that form. Or is that the only way to handle it? Is the choice of what can be done in a form submission between just (a) taking over full submission control of the form; or (b) not using any AJAX or other asynchronous actions in the event?

The Authorize.Net "Accept.JS" script seems to handle what I'm trying to do nicely, so I am confident it is possible. It is a different gateway I'm trying to write some JavaScript for, because the supplied JS for that gateway takes over the form submission and runs roughshod all over anything else bound to that form. Here is my Authorize.Net Accept.JS experiment. Notice you can put in a valid card that gets tokenised, but with an invalid email address the form does not get submitted (with the other gateway I'm trying to use, and its supplied JS, the form would simple get a forced submit as soon as the tokenisation details comes back). This Authorize.Net approach does not use preventDefault right at the start, which is great, so it is doing some other kind of magic.

Looking again at that magic, this is what the card tokenisation does in the submission event: It first checks if the card is already tokenised. If it is, then it exits and everything else carries on as normal. If the card is not yet tokenised, then it starts the tokenisation AJAX process and prevents the default form action by existing false (and I realise that is a deprecated thing). The AJAX callback then checks the tokenisation details, updates the form hidden fields and the resubmits the form from the start by pushing the submit button. That way all the bound events and validation can run run again, though it does feel like cheating. It also assumes that the card tokenisation is the first event bound to the form, and that if it's not, then prior events won't mind being fired more than once, like the user clicked the submit button twice. Feels wrong, but is this the way to handle it?

Submitted August 12, 2017 at 11:30PM by judgej2
via reddit http://ift.tt/2wEiawM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s