Urgent – error message not working and number field allowing text

You also have an error on the page.

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). controller-3750e20eb7811c174a4e9d27ed010f69.html:1:1

It is related to a js.stripe.com controller. So basically the Stripe payment plugin.

It doesn’t appear to be breaking anything PPOM related as I was able to add a product to the cart when using each field properly.

• This reply was modified 4 years, 9 months ago by brozra. Reason: adding source of error

I just tested it and it didn’t seem to work to well with the period. I am testing out different regex patterns. I’ll come back with something in a little while.

And here’s a little more if you want to prevent them from entering a number that exceeds the maximum of that particular field:

function number_input_restriction_js(){ ?>
<script type="text/javascript">
	jQuery(function($){
		$('input[type="number"]').bind("keydown keyup keypress",function(event){
			if (event.key === "Backspace" || event.key === "Delete" || 
			(event.ctrlKey === true && event.key === "a") || 
			(event.ctrlKey === true && event.key === "x") || 
			(event.ctrlKey === true && event.key === "Backspace") || 
			(event.which >= 48 && event.key <= 57) || 
			(event.which >= 96 && event.key <= 105) || 
			(event.key === "." && $(this).val().indexOf(".")<=1)) {
				// think happy thoughts :-)
			} else { event.preventDefault(); }
		}).bind("focus blur",function(){
			if (typeof $(this).attr("max") !== 'undefined') {
				if (parseFloat($(this).val()) > parseFloat($(this).attr("max"))) {
					$(this).val($(this).attr("max"));
				}
			}
		});
	 });
</script><?php }
add_action( 'wp_footer', 'number_input_restriction_js' );

And here is, hopefully, the final version with automated rounding down to one(1) decimal point in case they try and get cute and add 27 decimal points. It won’t round to the nearest 0.5. Just the nearest tenth based on what is entered. And I also added detection for the “Tab” key. I had forgotten it earlier.

function number_input_restriction_js(){ ?>
<script type="text/javascript">
	jQuery(function($){
		$('input[type="number"]').bind("keydown keyup keypress",function(event){
			if (event.key === "Backspace" || event.key === "Delete" || event.key === "Tab" || 
			(event.ctrlKey === true && event.key === "a") || 
			(event.ctrlKey === true && event.key === "x") || 
			(event.ctrlKey === true && event.key === "Backspace") || 
			(event.which >= 48 && event.which <= 57) || 
			(event.which >= 96 && event.which <= 105) || 
			(event.key === "." && $(this).val().indexOf(".")<=1)) {
				// think happy thoughts :-)
			} else { event.preventDefault(); }
		}).bind("focus blur",function(){
			if (typeof $(this).attr("max") !== 'undefined') {
				if (parseFloat($(this).val()) > parseFloat($(this).attr("max"))) {
					$(this).val($(this).attr("max"));
				}
			} $(this).val(Math.round( parseFloat($(this).val()) * 10 ) / 10);
		});
	 });
</script><?php }
add_action( 'wp_footer', 'number_input_restriction_js' );

• This reply was modified 4 years, 9 months ago by brozra. Reason: code correction

If it were my plugin I would add a new case for the switch in the ppom.inputs.js in the $.each loop at line 40 with the following:

// only allow numbers and periods in number fields
case "number":
	InputSelector.bind("keydown keyup keypress",function(event){
		 if (event.key === "Backspace" || event.key === "Delete" || event.key === "Tab" || 
		 (event.ctrlKey === true && event.key === "a") || 
		 (event.ctrlKey === true && event.key === "x") || 
		 (event.ctrlKey === true && event.key === "Backspace") || 
		 (event.which >= 48 && event.which <= 57) || 
		 (event.which >= 96 && event.which <= 105) || 
		 (event.key === "." && $(this).val().indexOf(".")<=1)) {
			 // think happy thoughts :-)
		 } else { event.preventDefault(); }
	 }).bind("focus blur",function(){
		 if (typeof InputSelector.attr("max") !== 'undefined') {
			 if (parseFloat(InputSelector.val()) > parseFloat(InputSelector.attr("max"))) {
				 InputSelector.val(InputSelector.attr("max"));
			 }
		 }
	 });
break;