INPUT: Enforce Min/Max As You Type

Method 1: Enforce min max, period: Good for smaller min quantities (js)

In use on Magneshade

Notes:

• The only way to "get rid" of the quantity is by entering 0 (I added the 0 check next to the main conditional value check.)
• You do not need a min or max in the input. If it's not there nothing will happen.
• You could use jquery show to display a message if it goes out of range, maybe a reminder what the ranges should be.

<input type="number" min="0" max="23" value="13" onkeyup="enforceMinMax(this)">

<script>
function enforceMinMax(el) {
   if (el.value != "" && el.value != 0) {
	 if (parseInt(el.value) < parseInt(el.min)) {
	   el.value=el.min;
	 }
	 if (parseInt(el.value) > parseInt(el.max)) {
	   el.value = el.max;
	 }
   }
}
</script>

Method 2: Enforce min max, handle negative, include delay: Good for larger min quantities (jquery)

This is in use on WCT.

Including a delay function allows the customer to change the quantity without having the minimum value get in the way while they are typing.

The input below comes from Shadows with the +/- boxes on right and left. We add delaykeyup as a class. Note that l.settings:min_quantity must be set via a custom field or something.

Example of getting l.settings:min_quantity from custom field (make sure you have the custom field active on the PROD page) :

<mvt:if expr="l.settings:product:customfield_values:customfields:minimum_quantity GT 1">
	<mvt:assign name="l.settings:min_quantity" value="l.settings:product:customfield_values:customfields:minimum_quantity" />
<mvt:else>
	<mvt:assign name="l.settings:min_quantity" value="1" />
</mvt:if>

<input  id="l-quantity" class="delaykeyup c-form-input u-text-center" data-max="" min="&mvt:min_quantity;" data-min="&mvt:min_quantity;" data-step="1" type="text" inputmode="decimal" name="Quantity" value="&mvt:min_quantity;">

<script>
$.fn.delayKeyup = function(callback, ms){
	var timer = 0;
	var el = $(this);
	$(this).keyup(function(){				   
	clearTimeout (timer);
	timer = setTimeout(function(){
		callback(el)
		}, ms);
	});
	return $(this);
};
$('.delaykeyup').delayKeyup(function(el){
  const minimum = $(el).attr('data-min');
  if (el.val() < 0) {
	$(el).val(minimum);
  }
  if (el.val() != "" && (parseInt(el.val()) < parseInt(minimum))) {
	$(el).val(minimum);
  }
},1000);
</script>

This script allows for a 1000 millisecond delay which is easily adjusted by changing the 1000 just above the closing script tag to whatever you want.