FoxyCart v2.0 - Custom checkout validation (overloading)

OK, so I think I am finally grasping the new events model in FC2.0, the v2.0 JavaScript documentation was a huge help. Thanks!

That said, I am wondering if anyone can comment on the validity of my approach (see below.) Something feels off, and I am wondering if perhaps I have misunderstood how you would accomplish custom checkout validation.

For example, say you wanted to prevent shipping to a "P.O. BOX", or to add additional validation to a required field (e.g. phone) to ensure only numbers have been entered, etc. My approach was to wrap these custom validation steps in their own events, and then to trigger() them as part of checkout-submit.

The problem I am facing is that if there is an error in the first custom validation event, the subsequent validation events are still executed. Am I using "next(false)" incorrectly? Also, what would be the correct way to check the response of a custom FC event so that I could simply "return false to stop processing the event queue" within checkout-submit?



FC.client.wrap("custom-a", function (next) {
// Checkout Validation A
var hasError = true;
if( hasError ){
next( false ); // Error! Prevent further processing
}
});

FC.client.wrap("custom-b", function (next) {
// Checkout Validation B
var hasError = true;
if( hasError ){
next( false ); // Error! Prevent further processing
}
});

FC.client.wrap("custom-c", function (next) {
// Checkout Validation C
var hasError = true;
if( hasError ){
next( false ); // Error! Prevent further processing
}
});

// Checkout submit validation
FC.client.on('checkout-submit', function(params, next){

// Custom Validation Check A
FC.client.event("custom-a").trigger( next );

// Custom Validation Check B
FC.client.event("custom-b").trigger( next ); // custom-b still runs if custom-a was in error ( e.g. next(false) )

// Custom Validation Check C
FC.client.event("custom-c").trigger( next ); // custom-c still runs if custom-a OR custom-b was in error ( e.g. next(false) )

next(); // Required to re-enable checkout button, etc.
});

Comments
  • fc_adamfc_adam FoxyCart Team
    edited January 2015
    @pixelchutes,

    So I think creating your own custom events there is probably a bit overkill for what you're wanting to do there. Instead, I'd recommend simply adding your custom validations hooked directly onto the checkout submit.

    By creating your own events there, the return false is simply stopping the execution of your custom event - not the checkout submit event. As you're wanting to stop the checkout-submit event, you need to be calling false within that event. So you could approach it like this:
    FC.client.on('checkout-submit', function(params, next){
    var isOk = true;

    // Insert validations here, setting isOk to false if something is wrong

    next(isOk);
    }
    There are two benefits to taking this approach. It simplifies the validations to a single function, and will correctly stop the checkout submit function. By calling them in a single function, and calling next(false) right at the end, it allows you to display all your custom validations to the user. If you returned next(false) validation by validation, the customer might see one error and fix that, and then when they submit discover they had another validation error to fix.

    I hope that helps!
  • Thanks, Adam. I guess I was over-thinking it :)

    I'll stick to encapsulating the logic inside the client event itself, and where a method makes sense, stick to a simple function.

    Appreciate it!
Sign In or Register to comment.