Inline form errors, aka validating form

I have select options for several products. Most customers know to select an option, but some ignore it and are able to add it to the Cart.

How do I validate the form in the easiest, simplest way possible with minimal coding?

I use bootstrap. I found this works well: https://plugins.jquery.com/bootstrapValidator/
But the foxycart action on the form doesn't allow validation.

Thank you,
Peter B.
Comments
  • fc_adamfc_adam FoxyCart Team
    @atmospherix,

    You can add some custom validations using our javascript events system - could you clarify which version of FoxyCart you're using? It's slightly different depending on your version.
  • Version 2.0
  • fc_adamfc_adam FoxyCart Team
    @atmospherix,

    Thanks for confirming that. Our 2.0 javascript events are detailed here: https://wiki.foxycart.com/v/2.0/javascript

    For what you're wanting to do - you could add something like this to your own website:
    var FC = FC || {};
    FC.onLoad = function () {
    FC.client.on('cart-submit', function(params, next){
    var form_is_valid = true;
    // Perform your validations here, setting the form_is_valid variable to false if it's not ok to proceed

    if (form_is_valid) {
    next();
    } else {
    next(false);
    }
    });
    };
    That code will run after the customer clicks to add a product to the cart, but before the product is actually added, allowing you to stop it if needed.
  • Thanks for the link. I modded the first example, Validating an Input:
    <script>
    var FC = FC || {};
    FC.onLoad = function () {
    FC.client.on('cart-submit', function(params, next) {
    $element = $(params.element);
    if (
    $element.attr('class') == 'vho'
    && $element.find('[name="honeyType"]').length > 0
    && !$element.find('[name="honeyType"]').val()
    ) {
    alert('Select type of honey');
    } else {
    next();
    }
    });
    };
    </script>
    I changed the id to class, added the class to the relevant forms.
    http://bethsbees.com/varietal-honey.html

    I suddenly feel smart worthwhile and valuable. Thank you.
  • fc_adamfc_adam FoxyCart Team
    @atmospherix,

    Awesome work - I'm glad that worked for you.
  • dustystringsdustystrings Member
    edited March 2016
    This is exactly what I was looking for, except it doesn't seem to be working for me... No alert pops up, and the customer can still add a product to the cart without selecting an option. Would anyone be able to take a look at my code and see if there's something I'm missing? (I am also using 2.0)

    I have this in my <head>:
    	<script>
    var FC = FC || {};
    FC.onLoad = function () {
    FC.client.on('cart-submit', function(params, next) {
    $element = $(params.element);
    if (
    $element.attr('class') == 'select-option'
    && $element.find('[name="options"]').length > 0
    && !$element.find('[name="options"]').val()
    ) {
    alert('Please select an option from the drop-down list');
    } else {
    next();
    }
    });
    };
    </script>

    and here's the code for my drop-down list:
    <select class="select-option" name="options">
    <option value="">Select an option</option>
    <option value="Green test thingy">Green test thingy</option>
    <option value="Fuzzy test thingy">Fuzzy test thingy</option>
    <option value="Smelly test thingy">Smelly test thingy</option>
    </select>

    I'll whisper a link to a test page, in case that helps.
  • The one difference I see with the honey example is that I've got a place to input quantity as well.
  • I thought I'd also add that my minicart doesn't seem to be working either. It properly links to the cart, but the quantity shows 0 no matter how many items are in the cart. I don't know if this is related, but seemed like it might be a clue.
  • fc_adamfc_adam FoxyCart Team
    @dustystrings,

    Thanks for detailing your set up and whispering the link to the page. Looking at your add to cart page, I'm not seeing the loader.js included for your FoxyCart store at all. That would be why the minicart isn't working and the cart-submit event isn't triggering. It's all added using our JS.
  • @fc_adam

    Wow, thanks! Of course it would be something stupidly simple like that!

    Now that I think about it, I remember removing the loader script a year ago because it required a newer version of jquery than our site could handle. We've just been going about our business without the sidecart. But it looks like our CMS has finally caught up and we're now on jquery 1.11.4. Do you think that will work ok? I see you recommend 1.11.1 in the docs.
  • fc_adamfc_adam FoxyCart Team
    @dustystrings,

    That version will be perfect.
  • One more question (hopefully the last one!), and sorry that it's probably an obvious one!

    There's a second script I've been using to reset the quantity box to zero when someone closes the sidecart. If I include them both as shown below, the first function doesn't work, but if I remove the second script, the first one does work. I can only assume there's a way to combine them so that they both work, but unfortunately, this is where my copy-and-paste javascript knowledge runs out...
    	
    var FC = FC || {};
    FC.onLoad = function () {
    FC.client.on('cart-submit', function(params, next) {
    $element = $(params.element);
    if (
    $element.attr('class') == 'fc-validate'
    && $element.find('[name="options"]').length > 0
    && !$element.find('[name="options"]').val()
    ) {
    alert('Please select an option from the drop-down list');
    } else {
    next();
    }
    });
    };

    var FC = FC || {};
    FC.onLoad = function () {
    FC.client.on('cart-submit.done', function () {
    jQuery("input[name$='quantity']").val(0);
    });
    };
  • fc_adamfc_adam FoxyCart Team
    @dustystrings,

    The onLoad function can only be defined once - so when you define it a second time, it overwrites the first. You'll just need to combine the two into one like this:
    	var FC = FC || {};
    FC.onLoad = function () {
    FC.client.on('cart-submit', function(params, next) {
    $element = $(params.element);
    if (
    $element.attr('class') == 'fc-validate'
    && $element.find('[name="options"]').length > 0
    && !$element.find('[name="options"]').val()
    ) {
    alert('Please select an option from the drop-down list');
    } else {
    next();
    }
    });
    FC.client.on('cart-submit.done', function () {
    jQuery("input[name$='quantity']").val(0);
    });
    };
  • You are the best!! Thanks so much!
Sign In or Register to comment.