Enable required options when using Uploadery and Infinite Options

By default, all fields added with Uploadery are optional, meaning the shopper may add the product to their cart without having to upload a file. However, it is easy to require that one (or more) of your upload fields have valid files before allowing the shopper to add the product to their cart.

1. Switch  Required to the On setting. You can do so for all of your upload fields that you would like to be required.

2. Paste the following snippet at the bottom of your  product.liquid file (<--- click here to locate that file).

<script>
$(function() {
  var errorMessages = {
    for_text_inputs: "Please add your personalized text before adding to cart.",
    for_number_inputs: "Please enter a custom quantity.",
    for_checkboxes: "Please select your options before adding to cart",
    for_dropdowns: "Please select an option before adding to cart",
    uploadery_msg: "Please select add your file(s) before adding to cart."
  };

  function validateIO(e) {

    var $io = $("#infiniteoptions-container");

    var invalidTextInputs = $io.find("input[type=text][required], textarea[required]").filter(function(idx, el) {
      return $(el).val() === "";
    });

    var invalidNumberInputs = $io.find("input[type=number][required]").filter(function(idx, el) {
      return $(el).val() === "";
    });

    var invalidFieldSets = $io.find("fieldset[data-required=true]").filter(function(idx, fieldSet) {
      if ($(fieldSet).find("input[type=checkbox]").length === 0) {
        return false;
      } else {
        return $(fieldSet).find("input[type=checkbox]").filter(function(idx, el) {
          return el.checked === true;
        }).length === 0;
      }
    });

    var hasInvalidDropdowns = $io.find('select[required] option:selected').is(':disabled');

    var errMsg = '';

    if (invalidTextInputs.length > 0) {
      errMsg = errorMessages.forTextInputs;
    } else if (invalidNumberInputs.length > 0) {
      errMsg = errorMessages.forNumberInputs;
    } else if (invalidFieldSets.length > 0) {
      errMsg = errorMessages.forCheckboxes;
    } else if (hasInvalidDropdowns) {
      errMsg = errorMessages.forDropdowns;
    }

    if (errMsg.length) {
      alert(errMsg);
      e.stopImmediatePropagation();
      return false;
    }

    return true;
  }

  function validateUploadery(e) {

    $(".uploaderyInvalidForm").removeClass("uploaderyInvalidForm");
    var $missingInputs = $("[data-uploadery-valid='false']");
    var $uploadInProgress = $('.uploadery-temporary');
    if ($missingInputs.length > 0 || $uploadInProgress.length > 0) {
      $missingInputs.addClass("uploaderyInvalidForm");
      alert(errorMessages.uploadery_msg);
      e.stopImmediatePropagation();
      return false;
    }

    return true;
  }

  $("form[action='/cart/add'] [type=submit]").on("click", function(e) {

    if (window.Shoppad &&
      window.Shoppad.apps &&
      window.Shoppad.apps.customizery &&
      window.Shoppad.apps.customizery.overrideDeprecatedValidation) {
      return true;
    }

    return (validateUploadery(e) && validateIO(e));
  });
});
</script>

If you need help getting this setup, simply  add us as a staff member and our team can perform a complimentary, Expert Install Service for you.

Still need help? Contact Us Contact Us