Support » Plugin: PPOM for WooCommerce » Urgent – error message not working and number field allowing text

  • Resolved Linnea

    (@ohminme)


    Hi,

    I’m using the PPOM PRO plugin, and have issues that need to be looked at urgently.

    On a couple of products I have number input fields that are required for measurements. However, these number input fields are for some reason allowing text. I have customers reporting that when they add one of these products to the cart, the check mark shows up on the ‘add to cart button’ – like it went through, but then the cart shows up empty. I now know it is because the customer have typed in a message in the number field (such as ‘my measurement is 29′ instead of just ’29’, and despite having the error message box ticked in settings, it doesn’t show up. Hence the customer doesn’t know what is wrong when they try to add this product to the cart without success.

    Please see the link where I have uploaded photos of my settings and a video which a customer sent me: https://www.dropbox.com/s/7rayuiox4tfnvwd/number%20field%20allowing%20text%20and%20no%20error%20message.mov?dl=0

    Since the error message won’t show up, I tried adding a tooltip. However, instead of just the text showing on hoover, an ugly span class tag also shows up.

    Summary:
    #The customer shouldn’t be allowed to type in text in a number field at all?
    #There is no error message showing up when the customer tries to add the product to the cart. It looks like it’s added to the cart when it’s not.
    #The tooltip text shows up on hoover with a span class tag.
    #The steps also don’t work. I’ve set it at 0.5, and still I can type in anything. It seems like none of the rules are being applied.

    The products which uses required number fields are:
    https://ohminme.com/shop/kompis-collar/
    https://ohminme.com/shop/buddy-harness/

    I have been in contact with someone named Labeeb but he’s of no help whatsoever.

    Kind regards,
    Linnea

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 16 total)
  • The solution to your problem is easy to fix and can be accomplished with a few lines of JavaScript. The following script basically removes all characters from the type=”number” fields that aren’t numbers as they type it:

    
    jQuery(function($){
        $('input[type="number"]').keyup(function (){
            $(this).val($(this).val.replace(/[^0-9]/g,''));
        });
    });
    

    That should fix you up for now.

    @nmedia – recommend you add this (or something similar) to the ppom.inputs.js as a new case for “number”.

    
    case "number":
    	$('input[type="number"]').keyup(function () {
    		$(this).val($(this).val.replace(/[^0-9]/g, ''));
    	});
    	break;
    
    • This reply was modified 3 months, 1 week ago by  brozra. Reason: remove regex indicator for periods

    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 3 months, 1 week ago by  brozra. Reason: adding source of error

    I removed the regex case for the period (dot) thinking you wouldn’t need it. You will need to add it back in order for your steps to work properly since you have them set at 0.5.

    Change this line

    
    $(this).val($(this).val.replace(/[^0-9]/g,''));
    

    to this:

    
    $(this).val($(this).val.replace(/[^0-9]\./g,''));
    

    Hi! Thanks so much for this.

    Where do I put the javascript?
    I’ve added a new case to ppom.inputs.js. I’m guessing I’ll need to do this again if there’s a plugin update?

    Thanks for giving me a heads up about the error. I’m actually having issues with WC not passing on info to Stripe. Hopefullt this is not causing issues with the PPOM plugin.

    Kind regards,
    Linnea

    The easiest way would be to add this to your wp_footer from your theme’s functions.php file. This way you don’t have to worry about plugin overrides.

    
    function number_input_restriction_js(){ ?>
    <script type="text/javascript">
    	jQuery(function($){
    		$('input[type="number"]').keyup(function (){
    		    $(this).val($(this).val.replace(/[^0-9]\./g,''));
    		});
    	 });
    </script><?php }
    add_action( 'wp_footer', 'number_input_restriction_js' );
    

    With this in place you can remove the case from the switch in the ppom.input.js.

    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.

    Okay. I officially hate regex patterns. I always have but it’s now official. I went back to my old school code and came up with something a bit different because I tried twenty variations of the decimal (dot) regex and it just wouldn’t work. So use this instead in your functions.php file. This will prevent them from using any key except the regular number keys and the numpad keys and will also prevent duplicate periods (dots). It also adds some functionality for basic deleting. It also prevents copying and pasting.

    
    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.which <= 57) || 
    			(event.which >= 96 && event.which <= 105) || 
    			(event.key === "." && $(this).val().indexOf(".")<=1)) {
    				// think happy thoughts :-)
    			} else { event.preventDefault(); }
    		});
    	 });
    </script><?php }
    add_action( 'wp_footer', 'number_input_restriction_js' );
    
    • This reply was modified 3 months, 1 week ago by  brozra. Reason: typo

    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' );
    

    This is absolutely amazing! Hopefully no more regex patterns on a weekend, sorry about that. Cheers!

    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 3 months, 1 week ago by  brozra. Reason: code correction
    Plugin Author N-Media

    (@nmedia)

    Hi @brozra,

    Thanks for all these efforts, so what’s is recommended chagnes in PPOM core?

    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;
    
    Plugin Author N-Media

    (@nmedia)

    Ok thanks.

    @brozra you’ve been super helpful! Am I right thinking you don’t work for these guys?

    If yes, do you by any chance do freelance work? I need help!

    @linnea You are correct. I don’t work for N-Media. I just help them out to make their plugin better because I also use it for my clients’ websites and I want it to work well.

    Freelance work depends on what you need. Contact me at ra39743833@brozra.com with your needs and I’ll see if I can help you out. This email address will be permanently deleted in 6 hours or right after you contact me.

Viewing 15 replies - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.