0

I am validating a form to a route. On success of validation I want to submit the form to another route so as to pull the next page in portal. Is this the correct way of doing it? It doesn't feel right.

I've tried handling the validation on button click, but that immediately submits form even if error.

Currently, I have 'action' & 'method' attributes on form along with a knockout submit attribute to handle the the validation. This is where I feel off.

In the proceeding code you'll see that I am running the .validate() on success whereas before I had ran .submit()

  • Validation Method (handleProceed) *
self.handleProceed = function() {
    $.ajax({
        type: "POST",
        url: "/apps/o365/validate_address",
        dataType: "json",
        cache: false,
    }).always( function(jqXHR, textStatus) {
        if ( textStatus != "success" || jqXHR.eligible == false ) {
            $("#proceedToPurchase").removeClass("disabled processing").text("Proceed to Purchase");
            $("#proceedToPurchaseModal").modal("show");
        } else if ( textStatus === "timeout" ) {
          alert("got timeout");
          $('#proceedToPurchase').addClass("disabled");
        } else {
            $("#proceedToPurchase").addClass("processing");
            $("#o365Form").validate();
        }
    });
};
  • How I am handling the Form Attributes *
<form id="o365Form" data-bind="attr: { action : purchaseURL }, submit: handleProceed" method="POST">
  • How the button on the Form is running *
<button 
id="proceedToPurchase"
type="submit"
class="btn btn-secondary btn-block py-4 font-20"
data-bind="attr: { disabled: !formIsFilled() }"
>

Expected:

  1. Button is clicked
  2. handleProceed() runs and validates
  3. THEN form is submitted to pull next page
adiga
  • 34,372
  • 9
  • 61
  • 83
  • What is `purchaseURL`? Is it same as `/apps/o365/validate_address`? – adiga May 08 '19 at 19:14
  • purchaseURL is a different route. so it should hit `/apps/o365/validate_address` first then post action to `purchaseURL`. taking me to the next page –  May 08 '19 at 19:15
  • The `form` won't wait for ajax to complete. You can remove `action` binding from the `form` and make another post to `purchaseURL` in the validate_address's ajax `success` callback (Not sure if this the best way to handle this type of scenario) – adiga May 08 '19 at 19:18
  • https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission – Esger May 08 '19 at 19:19
  • @Esger the problem here is the the validation itself is asynchronous. – adiga May 08 '19 at 19:20
  • Then it might be better to handle this with a promise() which submits the form when the validation succeeds (fulfill) and prevents submission otherwise (reject). – Esger May 08 '19 at 19:36
  • @adiga i've spent the past while thinking this out. Knockout's `submit` binding, by default, prevents the `default` form submission (action="purchaseURL"). Which, to me, means it will run whatever is in the handleProceed. handleProceed makes a post request to validate, if error shows modal, if not then grabs form and hits `.submit()` or in the example `.validate()`. So after finding this out. I Believe this to be the correct way of submitting this form! –  May 08 '19 at 20:32

0 Answers0