data-fc-required not working for me

I have data-fc-required on a custom field, but customers can add the item to the cart without filling it in. This is what it looks like:
<input type="text" name="entry_number||30205c9c75ea98f2b390255454ddf5f004dd1210e7ca6e4edaff1214a9caa6dd||open" value="" maxlength="4" style="width: 125px;" id="entry_number" class="fc_required" data-fc-required>

What am I missing?
Comments
  • GeorgeInActonGeorgeInActon Member
    edited February 27
    .
  • fc_adamfc_adam FoxyCart Team
    @GeorgeInActon,

    Good question. The data-fc-required HTML attribute currently only applies to custom fields as part of the checkout form - but it looks like you're attempting to use that on an add to cart for your store. We don't currently support that within add to carts, but it is possible to add in your own custom validations there.

    To do that, you'd make use of our javascript events system to check the form is completed prior to submitting to the cart. I'd also recommend updating it from data-fc-required to just required within your add to cart so that the browsers default HTML5 support can take over there to if it's available. In terms of the custom javascript - you would add this to your own website's javascript:
    var FC = FC || {};
    FC.onLoad = function () {
    FC.client.on("cart-submit", function(params) {
    if ($(params.element).is("form") && $(params.element).find("[required]").filter(function () { return $.trim($(this).val()).length == 0}).length > 0) {
    alert("Please ensure you've completed all required form fields");
    return false;
    }
    });
    };
    That will run before an add to cart happens - and if it's a form, and the form has required fields that are empty - it stops the add to cart from happening and shows an alert prompt.
Sign In or Register to comment.