Validation check between two question | XM Community
Skip to main content

I need help with setting up a validation check between two questions. Q1 is a multiple choice question with numeric buckets. Q2 is a multiple choice question with a required entry field for which the entered value MUST be within the range selected in Q1. One cannot proceed to the next screen until correcting their response. How do I set this up?

I am including a screenshot of the two questions as well as the JavaScript I am using but does not seem to be working properly. 
 

Qualtrics.SurveyEngine.addOnload(function () {
// Define the ranges for Q1 in an object
const ranges = {
'1': { min: 0, max: 19 },
'2': { min: 20, max: 49 },
'3': { min: 50, max: 99 },
'4': { min: 100, max: 249 },
'5': { min: 250, max: 499 },
'6': { min: 500, max: 749 },
'7': { min: 750, max: 999 },
'8': { min: 1000, max: 2499 },
'9': { min: 2500, max: 4999 },
'10': { min: 5000, max: 19999 },
'11': { min: 20000, max: 49999 },
'12': { min: 50000, max: Infinity }
};

// Get the selected Q1 choice
const selectedQ1 = '${q://QID273/SelectedChoices}'; //
const selectedRange = rangesgselectedQ1]; // Get the corresponding range

// Attach the validation logic to the question's submit event
this.questionclick = function () {
// Retrieve Q2 response value
const q2Response = parseInt(
jQuery("#" + this.getQuestionContainer().id + " inputptype='text']").val(),
10
);

// Check if the "Don't know" option is selected
const dontKnowChecked = jQuery("#" + this.getQuestionContainer().id + " inputptype='radio']ovalue='98']").is(":checked");
if (dontKnowChecked) {
return true; // Allow submission if "Don't know" is selected
}

// Validate the numeric response
if (selectedRange && !isNaN(q2Response)) {
if (q2Response >= selectedRange.min && q2Response <= selectedRange.max) {
return true; // Input is valid
}
}

// Display error message and prevent submission if invalid
alert("Please enter a number that falls within the range you selected in the previous question.");
return false;
};
});

 

@Eltion99,

Your pipe is wrong. Instead of ${q://QID273/SelectedChoices} it should be ${q://QID273/SelectedChoicesRecode}. SelectedChoices pipes the choice label(s).

I’m not sure about the rest of your JS (I haven’t tried it).


@TomG I did make that change just now, but still no luck. The issue is that when I enter the code it does not give me an error, so when I preview the question I am able to progress without the validation checks showing as failing. 

Besides JS, is there a workaround that you can think of?


Hi,

You can do like below.

Step 1:Recode values as 1,2,3,4,5….

Step 2: Create 2 embedded variables e.g varMin, varMax in the start of survey flow.

 

Step 3:

Put this JS into Q273

 

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
    var qobj = this;
    var displayedChoices = i];
    
    var ver = "${q://QID16/SelectedChoicesRecode}"; //replace your question id
            jQuery("#"+this.questionId).hide();
    jQuery.each(qobj.getChoices(), function(index, value) {
        if(qobj.getChoiceDisplayed(value)) displayedChoices.push(value);
    });    
    if(ver=="1")
    {
    Qualtrics.SurveyEngine.setEmbeddedData("varMin",0);
    Qualtrics.SurveyEngine.setEmbeddedData("varMax",20);
    }
    
    if(ver=="2")
    {
    Qualtrics.SurveyEngine.setEmbeddedData("varMin",20);
    Qualtrics.SurveyEngine.setEmbeddedData("varMax",49);
    }
    /*Same as above, update your min and max based on the code you have assigned at Q273*/ 
    if(ver=="3")
    {
    Qualtrics.SurveyEngine.setEmbeddedData("varMin",10);
    Qualtrics.SurveyEngine.setEmbeddedData("varMax",19);
    }
    
    if(ver=="4")
    {
    Qualtrics.SurveyEngine.setEmbeddedData("varMin",20);
    Qualtrics.SurveyEngine.setEmbeddedData("varMax",49);
    }
    
        if(ver=="5")
    {
    Qualtrics.SurveyEngine.setEmbeddedData("varMin",50);
    Qualtrics.SurveyEngine.setEmbeddedData("varMax",99);
    }
        if(ver=="6")
    {
    Qualtrics.SurveyEngine.setEmbeddedData("varMin",100);
    Qualtrics.SurveyEngine.setEmbeddedData("varMax",399);
    }
            if(ver=="7")
    {
    Qualtrics.SurveyEngine.setEmbeddedData("varMin",400);
    Qualtrics.SurveyEngine.setEmbeddedData("varMax",999);
    }
    
    if(ver=="8")
    {
    Qualtrics.SurveyEngine.setEmbeddedData("varMin",1000);
    Qualtrics.SurveyEngine.setEmbeddedData("varMax",1999);
    }
        if(ver=="9")
    {
    Qualtrics.SurveyEngine.setEmbeddedData("varMin",2000);
    Qualtrics.SurveyEngine.setEmbeddedData("varMax",4999);
    }
            if(ver=="10")
    {
    Qualtrics.SurveyEngine.setEmbeddedData("varMin",5000);
    Qualtrics.SurveyEngine.setEmbeddedData("varMax",9999);
    }
                if(ver=="11")
    {
    Qualtrics.SurveyEngine.setEmbeddedData("varMin",10000);
    Qualtrics.SurveyEngine.setEmbeddedData("varMax", 1000000);
    }
    qobj.clickNextButton();

});

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

});

 

Step 4: At your numeric question, apply this validation

 

 


@TomG I did make that change just now, but still no luck. The issue is that when I enter the code it does not give me an error, so when I preview the question I am able to progress without the validation checks showing as failing. 

Besides JS, is there a workaround that you can think of?

You don’t need JS, You can use the custom validation to make sure respondent cannot enter more  or less than the selected range in Q1. One drawback using the Custom validation is, You cant have multiple validation messages to display for each scenario.


Hi,

Simplified your ranges for testing, readjust (same for question 1 ID).

Qualtrics.SurveyEngine.addOnload(function () {

const ranges = {
'1': { min: 0, max: 19 },
'2': { min: 20, max: 49 },
'3': { min: 50, max: Infinity }
};

const selectedQ1 = '${q://QID1/SelectedChoicesRecode}';
const selectedRange = ranges[selectedQ1];


var that = this;
var nextButton = document.getElementById('NextButton');
nextButton.addEventListener('click', function(event) {
const q2Response = parseInt(jQuery("#" + that.getQuestionContainer().id + " input[type='text']").val(), 10);
const dontKnowChecked = jQuery("#" + that.getQuestionContainer().id + " input[type='radio'][choiceid='2']").is(":checked");
if (dontKnowChecked) {
return true;
}

if (selectedRange && !isNaN(q2Response)) {
if (q2Response >= selectedRange.min && q2Response <= selectedRange.max) {
return true;
}
}

alert("Please enter a number that falls within the range you selected in the previous question.");
event.stopImmediatePropagation();
return false;
});

});

 


Leave a Reply