How can I add validation to the "Checkout" button

oooooo Member
in Help edited March 2012
I want to add some custom validation to the checkout button. I already am using this code to do some extra things on the button click by using this:
     FC.checkout.overload("validateAndSubmit", "removeNonSelectedChoice", null);

but I never had to actually cancel the submit if a certain condition didn't exist. I know i can use the fc_required class but in this case i have some fairly complex logic (if one field is set to this and another field is set to this, then don't submit and alert to the user that your settings are not valid.

How can I add some custom validation when the user clicks submit on the checkout screen and allow me to return a certain value that will alert the user and cancel the form from submitting?

I see a few posts around validation before adding to a cart (like here ) but I don't see the equivalent around checkout submit.

Any example code would be greatly appreciated !!
Comments
  • lukeluke FoxyCart Team
    Hey ooo. Are you using 072? We added a config value you can just set to false within your own validation to prevent checkout:
    FC.checkout.config.isValid
    

    Will that work for you?
  • fc_adamfc_adam FoxyCart Team
    Also to add to Luke's comment there - if you take advantage of the 'isValid' setting, make sure you also set it to true when the checkout is valid for your custom checks - otherwise the customer won't be able to checkout if they fix what was an invalid submit.
  • oooooo Member
    edited March 2012
    luke / fc_adam - so i upgraded to 072 (pretty seamless) and i added the line for IsValid but it still went ahead and processed the transaction here is an example of my code.

    Can you please help investigate and advise on what I should be writing here to validate after a user clicks "Complete Your Purchase" on the checkout page. If it fails validation, it should NOT submit the order.

    In the code below, i get the alert() so i know it is hitting this code but it doesn't stop the processing from moving forward.
     <script type="text/javascript" charset="utf-8">
    
                function removeNonSelectedChoice() {
                    
                    if ($("#pickUp").attr("checked")) {
                        $("#schoolDeliveryInfo").remove();
                        
                        var pickupTime = $("#pickupTime").val();
                        if (pickupTime == '') {
                            alert("You need to enter a pickup time");
                            FC.checkout.config.isValid = false;
                        }
                        else {
                            FC.checkout.config.isValid = true;
                        }
                   }
                }
    
                FC.checkout.overload("validateAndSubmit", "removeNonSelectedChoice", null);
    
    
  • fc_adamfc_adam FoxyCart Team
    @ooo,

    Could you link us to your checkout please?
  • oooooo Member
    http://www.elementarybakeshop.com/

    you can click on Gourmet Cupcakes and add something to the cart. go back to home page and click "Checkout"
  • fc_adamfc_adam FoxyCart Team
    I'm not sure why, but moving the alert to be last in that if block made it work for me. Can you give that a try?
  • oooooo Member
    @fc_adam . . . what do you mean "moving the alert to be last in that if block made it work for me" . .can you provide some code example of what worked for you?
  • lukeluke FoxyCart Team
    edited March 2012
    Hey ooo. You may have more serious problems with your server at the moment. When I tried to pull up your cart, I saw no buttons!

    no_cart_buttons.jpg

    When I tried to load your image directly, I got this:

    server_error.jpg


    That doesn't look good.
  • fc_adamfc_adam FoxyCart Team
    @ooo,

    I was meaning this:
                        if (pickupTime == '') {
                            FC.checkout.config.isValid = false;
                            alert("You need to enter a pickup time");
                        }
    
  • oooooo Member
    edited March 2012
    fc_adam / luke

    I now got it working .. it looks like it had to do with a change in how jquery works with attr() versus prop() in 1.6+. Also, i somehow i had some old image links on my cart, after updating those images, the error you mentioned above have now all gone away . .

    also, the IsValid validation now seems to be working as well so i am all set.

    thanks for your help
Sign In or Register to comment.