🔢Numeric validation

Add functionalities to open answers for numeric validation, stablish a min ad max value and other useful functionalities.

The following code is desing to add validation to open text inputs. This way, you can set a limit of digits, a maximum and a minumux amount as well.

First, you need to add an open text question where you want to add numeric validation.

Then, paste the code below and click the save button.

function numeric_validation({question_code, min_val = 0, max_val = Number.POSITIVE_INFINITY, max_length} = {}) {
    var user_input = document.querySelector("#p_" + question_code + "_1");
    
    var target_question = user_input;
    while(!target_question.parentElement.classList.contains("card")) {
        target_question = target_question.parentElement;
    }

    user_input.addEventListener("input", (e) => {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');

        question = document.querySelector("#p_" + question_code + "_1");
        feedback = document.querySelector("#feedback_" + question_code);

        if (feedback != null) {
            feedback.remove();
            question.classList.remove("is-invalid");
        }

        if (e.target.value != "") {
            if (e.target.value.length > max_length) {
                e.target.value = e.target.value.slice(0, max_length);
            }

            if (e.target.value < min_val) {
                question.classList.add("is-invalid");
                target_question.insertAdjacentHTML(
                    "beforebegin",
                    `<span class="d-block custom-error pb-1 text-center" id="feedback_` + question_code + `">
                    <span class="form-error-message text-danger">The number can't be lesser than ` + min_val + `</span></span>`
                );
            } else if (e.target.value > max_val) {
                question.classList.add("is-invalid");
                target_question.insertAdjacentHTML(
                    "beforebegin",
                    `<span class="d-block custom-error pb-1 text-center" id="feedback_` + question_code + `"><span class="form-error-message text-danger">The number can't be greather than ` + max_val + `</span></span>`);
            }
        } else {
            question.classList.add("is-invalid");
            target_question.insertAdjacentHTML(
                "beforebegin",
                `<span class="d-block custom-error pb-1 text-center" id="feedback_` + question_code + `"><span class="form-error-message text-danger">This field can't be blank</span>
                </span>`
            );
        }
    })

    document.querySelector("#p_next").addEventListener("click", (e) => {
        if (Number(user_input.value) < min_val || Number(user_input.value > max_val)) {
            e.preventDefault();
            document.querySelector("#p_" + question_code + "_1").scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
        }
    })
}

numeric_validation({
    question_code : "Q1",
    min_val : 1,
    max_val : 65,
    max_length : 2
});

List of variables

Parameter	Value	Example
question_code	The question ID of the text input you want to convert	numeric_validation({ question_code : "Q1", min_val : 1, max_val : 65, max_length : 2 });
min_val	The minimum value to accept No value: Default value is set to 0.	numeric_validation({ question_code : "Q1", min_val : 1, max_val : 65, max_length : 2 });
max_val	The maximum value to accept No value: Default value is set to +infinity.	numeric_validation({ question_code : "Q1", min_val : 1, max_val : 65, max_length : 2 });
max_length	The maximum amount of digits	numeric_validation({ question_code : "Q1", min_val : 1, max_val : 65, max_length : 2 });

How to use it...

// Example for age validation
numeric_validation(
    question_code = "Q1", 
    min_val = 1, 
    max_val = 99, 
    max_length = 3
);

Legacy code: The following codes works but have a drawback. If you type and click the next button fast, the text will not be properly deleted and we will recollect text instead numbers.

Version 1: Basic numeric open ended

One of the common case of use, is when you need to get numeric data from the respondent, i.e., to get the age, a quantity or an amount of money. This is when data validation comes to our part because SynoSurveys don't parse text to integers directly.

Affortunately, we have the following code to accept only numeric inputs in every single open ended question in the current page.

Warning: This code will remove strings on all the open ended questions that appear in the page. To be more specific, use the version 2 instead.

numeric_only.js

/*
    NUMERIC ONLY - Version 1
    Author: Kenneth Díaz González
    Email: [e-mail]

    A snippet to allow that a textbox only receives numbers

    This code will add this caracteristic for all the text inputs 
    that appear in the page. If you need to be more specific, use version 2
    instead.
*/

// Get all the input texts
inputs = document.querySelectorAll(".custom-text");
// Iterate over them
inputs.forEach((input) => {
  // If something has been written
  input.addEventListener("keyup", (e) => {
    // Replace the letters with empty strings
    e.target.value = e.target.value.replace(/\D/g, "");
  });
});

Version 2: Advanced numeric open ended

Sometimes, you will need to parse just one free answer to allow numeric values. In that case, you will need to use this code. To apply this parsing you need to pass the question code to the function when it's run.

/*
    ADVANCED NUMERIC ONLY - Version 2
    Author: Kenneth Díaz González
    Email: [e-mail]

    A snippet to allow that a textbox only receives numbers

    This code will add this caracteristic for a specified text input.
*/

function numeric_only(question_code) {
  // Get all the input texts
  input = document.querySelector("#p_" + question_code + "_1");
  input.addEventListener("keyup", (e) => {
    // Replace the letters with empty strings
    e.target.value = e.target.value.replace(/\D/g, "");
  });
}

// Call the function to apply it
numeric_only("Q1");