limit numbers in number flied

Can I set a minimum and maximum of numbers in a Number field? So the user must fill 6 numbers and not less not more.

Is there any way of achieve this?

  • Sanowar Prince
    • Staff

    Hi Timur,

    Hope you’re doing good today.

    I had a closer look on your issues. Unfortunately there is no built-in option available at this moment to set a limit like what you wanted. You will need some custom JS code to achieve that.

    I created a Test form and a Test page on your site and placed the test form on the test page. As your theme has no option available to add custom JS code, so I installed a plugin Simple Custom CSS and JS and added the following code there. You would find it on your wp-admin > Custom CSS & JS > All Custom Code > Custom number length.

    jQuery(document).ready(function() {
    jQuery('.custom-number-length input').attr({ maxLength : 6, minlength : 6 });
    });

    I used custom-number-length class to the number field and wrote JS code targeting that class, so if you want to set limit to 6 to any other number field on any other form you could use that class to that number field.

    Please note, my code sets the minimum and maximum length to 6. If you need to set different length on different number field, you could add another class name to that new number field, then add new JS code using the new class name and change the length value in maxLength and minlength. Here is a sample code.

    jQuery(document).ready(function() {
    jQuery('.custom-number-length-new input').attr({ maxLength : 8, minlength : 4 });
    });

    If you have any further queries, please let us know.

    Best regards,

    Sanowar

  • Sanowar Prince
    • Staff

    Hi Timur,

    My previous solution works for text input field. If you use my previous code, it will stop the type when maximum length is reached. All you need is to use the proper CSS selector for that input field.

    After some research I found that maxLength attribute doesn’t apply on number input field, instead it allows max attribute to validate the maximum possible value.

    Please use the following code for number input field.

    jQuery(document).ready(function() {
    // Set maximum input value for a specific input length
    jQuery('.custom-number-length input[type=number]').attr({ maxLength : 6, minlength : 6, max : 999999 });

    // Stop the type when maximum input length is reached
    jQuery('.custom-number-length input[type=number]').on('input', function() {
    var $this = jQuery(this);
    var maxLength = $this.attr('max').length;
    var value = $this.val();
    if (value && value.length >= maxLength) {
    $this.val(value.substr(0, maxLength));
    }
    });
    });

    As you wanted to limit the input length to 6 digits, so I set max attribute value to 999999 which is maximum value for 6 digits. Now, if you want to limit the input length to 4 digits, you will have to set max attribute value to 9999 which is maximum value for 4 digits.

    If you have any further queries, please let us know.

    Best regards,

    Sanowar

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.