Conditional custom validation message

Question

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

TomG · Accepted Answer

​@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 validationmessage 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}});

nikamshubham_73 · Answer

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.

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded