Debugging custom validation code for matrix | XM Community
Skip to main content

I have a question which is of the matrix table form with text entry and 2 statements. I want to add custom validation to ensure that the first value if greater than 0 and the second value is greater than the first value. I am using the following code but the second part of the code is not working. Any help in debugging would be much appreciated. 

 

Thanks

 

 

Qualtrics.SurveyEngine.addOnload(function() {
    var q = jQuery("#" + this.questionId);
    var nextButton = jQuery("#NextButton");

    // Attach blur event to text entry fields in the Matrix Table
    q.find("input.type='text']").on("blur", function() {
        var cell = jQuery(this).closest("td");
        var row = cell.closest("tr").index();
        var col = cell.index();

        // Perform validation based on the row and column indices
        if (row === 0) {
            // Validation for the first statement's text entry column
            validateNumberForStatement1(q, row, col, this.value);
        } else if (row === 1) {
            // Validation for the second statement's text entry column
            validateNumberForStatement2(q, row, col, this.value);
        }
    });

    // Function to validate the entered number for the first statement
    function validateNumberForStatement1(q, row, col, value) {
        var ve = q.find(".ValidationError").eq(0);

        if (value <= 0) {
            ve.html("Statement 1, Cell (" + (row + 1) + ", " + (col + 1) + "): " + value + "cannot be less than 0");
            ve.show();
            q.find("input"type='text']").eq(row * q.find("tr:first td").length + col).val(""); // Clear the invalid value
            nextButton.prop("disabled", true);
        } else {
            ve.html(""); // Clear any existing error message
            ve.hide();
            nextButton.prop("disabled", false);
        }
    }

    // Function to validate the entered number for the second statement
    function validateNumberForStatement2(q, row, col, value) {
        var ve = q.find(".ValidationError").eq(0);
        var cell1_1_value = q.find("inputttype='text']").eq(row * q.find("tr:first td").length).val();
        
        if (col === 1 && value < cell1_1_value) {
            ve.html("Statement 2, Cell (" + (row + 1) + ", " + (col + 1) + "): " + value + " cannot be less than"+ cell1_1_value);
            ve.show();
            q.find("input,type='text']").eq(row * q.find("tr:first td").length + col).val(""); // Clear the invalid value
            nextButton.prop("disabled", true);
        } else {
            ve.html(""); // Clear any existing error message
            ve.hide();
            nextButton.prop("disabled", false);
        }
    }
});
 

Hi @v_anand Can you use the below code. Replace the QID with appropriate Question ID.

Qualtrics.SurveyEngine.addOnReady(function() {
    var firstTextBox = jQuery("input#QR\\~QID7\\~1\\~1\\~TEXT");
    var secondTextBox = jQuery("input#QR\\~QID7\\~2\\~1\\~TEXT");
    var errorContainer = jQuery("#"+this.questionId+" .ValidationError");
    var nextButton = jQuery("#NextButton");

    // Attach input event to the first text entry box
    firstTextBox.on("input", function() {
        validateTextBoxes();
    });

    // Attach input event to the second text entry box
    secondTextBox.on("input", function() {
        validateTextBoxes();
    });

    // Validate the text entry boxes
    function validateTextBoxes() {
        var firstValue = parseFloat(firstTextBox.val());
        var secondValue = parseFloat(secondTextBox.val());

        // Check if the first value is greater than 0
        if (isNaN(firstValue) || firstValue <= 0) {
            errorContainer.html("Error: The first value must be greater than 0.");
            errorContainer.show();
            nextButton.prop("disabled", true);
            return;
        }

        // Check if the second value is greater than the first value
        if (isNaN(secondValue) || secondValue <= firstValue) {
            errorContainer.html("Error: The second value must be greater than the first value.");
            errorContainer.show();
            nextButton.prop("disabled", true);
            return;
        }

        // If both conditions pass, hide the error message and enable the Next button
        errorContainer.html("");
        errorContainer.hide();
        nextButton.prop("disabled", false);
    }
});

Qualtrics.SurveyEngine.addOnUnload(function() {
    /*Place your JavaScript here to run when the page is unloaded*/
});
 

Leave a Reply


Terms & Conditions