Conditional custom validation message | XM Community
Skip to main content
Michael_Cooksey
Administrator
8 days ago
Solved

Conditional custom validation message

  • February 14, 2025
  • 4 replies
  • 56 views
O
Level 2 ●●
Forum|alt.badge.img+2
  • OBh
  • Level 2 ●●
  • 28 replies

I am trying to use conditional validation message. I have a couple of multiple choice questions: 

 

Q1: What is the retail manager’s guess? 

(1) The customer is not interested at this moment.

(2) The customer does not understand the specifications. 

(3) The customer is confused with options.

(4) The customer is more interested in competitor’s product.

 

Q2: What are the specifications given to the customer? 

[] SMS

[] Color

[] Display

[] Price

[] Discount

[] Memory

 

The green colors are the correct answers. 

What I am trying to do it, I am trying to display one custom error message if a wrong answer is given and display a button for it [I got help in this forum to do it and made little of my own changes to it.] and I want to display another customer error  message for the questions which are not answered: So in summary, what I am trying to do is: 

If any of the questions are not answers - I want to display : Please answer the following questions. for that particular question/questions. 

If any of the questions are incorrect I want to display: Your answer is incorrect. Please see the instruction button below for that particular question/questions. 

I need to have both these questions in one page and not on separate pages. 

The code to generate the custom button is below:

[along with the code I have set a validation condition to generate the message “Your answer is incorrect. Please see the instruction button below. “ But this message is getting displayed even if the questions is not answered. I want to have another error message if any question/questions are not answered.]

 

Qualtrics.SurveyEngine.addOnReady(function () {
    const quest = this;
    const qc = quest.getQuestionContainer();

    qc.style.display = "none";

    const toggleButton = document.createElement("button");
    toggleButton.textContent = "Show Introduction";
    toggleButton.style.display = "none";

    // Apply primary color and improved styling
    toggleButton.style.backgroundColor = "#7A0019"; // Custom primary color
    toggleButton.style.color = "white"; // White text for contrast
    toggleButton.style.border = "none";
    toggleButton.style.padding = "10px 15px";
    toggleButton.style.marginTop = "15px"; // Moves it further below
    toggleButton.style.cursor = "pointer";
    toggleButton.style.borderRadius = "5px";
    toggleButton.style.fontSize = "14px";
    toggleButton.style.fontWeight = "bold";
    toggleButton.style.transition = "background-color 0.3s ease";

    // Hover effect for better UX
    toggleButton.onmouseover = function () {
        toggleButton.style.backgroundColor = "#590014"; 
    };

    toggleButton.onmouseout = function () {
        toggleButton.style.backgroundColor = "#7A0019"; 
    };

    toggleButton.onclick = function () {
        if (qc.style.display == "none") {
            qc.style.display = "";
            toggleButton.textContent = "Hide Introduction";
        } else {
            qc.style.display = "none";
            toggleButton.textContent = "Show Introduction";
        }
    };

    qc.insertAdjacentElement("afterend", toggleButton);

    setTimeout(() => {
        document.querySelectorAll(".Skin .ValidationError").forEach((el) => {
            const isDisplayed = getComputedStyle(el).display == "block";
            if (isDisplayed) {
                toggleButton.style.display = "";
            }
        });
    }, 500);
});

 

Also, is it possible to generate this button below the questions answered incorrectly and not for questions which are not answered? 

 

Thanks, 

O

 

 

Best answer by TomG

​@OBh,

You don’t need code for the custom validation part. If you require response and add custom validation to the questions, the appropriate validation message will be displayed based on whether the question was not answered or incorrectly answered.

I don’t really understand what you are trying to do with the button thing. It seems rather convoluted and there is probably a simpler approach. Anyway, if you want to ‘do something’ when the custom validation message is displayed you can base your logic on the text of the validation message that is displayed. For example:

Qualtrics.SurveyEngine.addOnload(function() {
	var ve = jQuery(this.getQuestionContainer()).find(".ValidationError:visible");
	if(ve.length>0 && ve.text()=="My custom validation text") {
		//do something
	}
});

 

View original

4 replies

N
Level 2 ●●
Forum|alt.badge.img+3

Hi ​@OBh,
Is it possible to use In-Page display logic for the second question so that it only appears when the third option is selected in the first question?

If yes, then you can simply achieve this by using custom validation for both the questions.

O
Level 2 ●●
Forum|alt.badge.img+2
  • OBh
  • Author
  • Level 2 ●●
  • 28 replies
  • February 14, 2025

​@nikamshubham_73 unfortunately no. I cannot do that, both needs to appear at the same time. Additionally, I cannot use the custom response because I have another set of such questions with similar issue but a different message when the question is skipped. I believe some manipulation of the code is needed. 

All the code for the button is added to another text/graphics question with introduction statements (present in the same block.)

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5909 replies
  • Answer
  • February 14, 2025

​@OBh,

You don’t need code for the custom validation part. If you require response and add custom validation to the questions, the appropriate validation message will be displayed based on whether the question was not answered or incorrectly answered.

I don’t really understand what you are trying to do with the button thing. It seems rather convoluted and there is probably a simpler approach. Anyway, if you want to ‘do something’ when the custom validation message is displayed you can base your logic on the text of the validation message that is displayed. For example:

Qualtrics.SurveyEngine.addOnload(function() {
	var ve = jQuery(this.getQuestionContainer()).find(".ValidationError:visible");
	if(ve.length>0 && ve.text()=="My custom validation text") {
		//do something
	}
});

 

O
Level 2 ●●
Forum|alt.badge.img+2
  • OBh
  • Author
  • Level 2 ●●
  • 28 replies
  • February 14, 2025

​@TomG 

Thank you for your response. 

Let me try to make the question more clear:

I have a block in Qualtrics: 

 

Q1:[MCQ] What is the retail manager’s guess? 

(1) The customer is not interested at this moment.

(2) The customer does not understand the specifications. 

(3) The customer is confused with options.

(4) The customer is more interested in competitor’s product.

 

Q2: [MCQ]What are the specifications given to the customer? 

[] SMS

[] Color

[] Display

[] Price

[] Discount

[] Memory

 

Q3: Statement block [text] showing the introduction portion. So Q3 is not a question but simply a description. 

For Q1 and Q2 I have put a custom validation message. 

What I am trying to do : 

 

I put a JavaScript in Q3: [This is question is simply a text with details about the study - my introduction] 

Part1) => If any of Q1 or Q2 is incorrectly answered, the custom validation message I have set for them pops up, along with a button which if I click will show the text(introduction) in Q3 of the block. The custom validation message I have set is : Your answer is incorrect. Please see the introduction button below → I was trying to do this with the code I shared above. 

 

Part 2) =>  what I could not do   If any of the questions are skipped I want to display: Please answer the following questions. One way is to set custom error message in Responses section and force response in each question in Qualtrics but that will change error message for every question and I do not want that. 

 

So, basically, for each question, I want a) type1 error message [Your answer is incorrect. Please see the introduction button below] + button if the question is answered incorrectly and b) type 2 error [ Please answer the following questions] message and no button if the question is skipped. 

 

Does it make more sense? Please let me know. 

 

 

Leave a Reply


Terms & Conditions