Hello,
I currently work with an addOnPageSubmit(function()) for making different type of calcul when the respondant click on "next".
I check the result of them operations with an embedded data that I use in the survey flow. Depending on the result, I use a branch for displaying a message error.
I was wondering if is there possible to display this error message directly in the page submitted? Like a custom validation in Qualtrics... But with javascript? And if yes, can you show me some examples?
Thanks for your help :)
Yes, this can be done, but you can't use addOnPageSubmit(). Instead, you need to create your own fake 'Next' button then your JS would click the real Next button if it passes validation or display an error message if it doesn't.
Thank you TomG ! Have you an exemple of this kind of JS please ?
JR33 The code you are asking for requires HTML, CSS, and Javascript. I recently pieced these together from multiple posts on Community. It was difficult for a non-programmer so I will share it here for others. I chose to add an extra button between previous and next and disabled the Next button until validation passed.
HTML (goes in the survey question text, must input with the HTML view)
- creates a fake Next button
- In the CSS and Javascript code this button is called validate_button and displays as "Verify"
CSS (goes in Look and Feel - Style - Custom CSS)
- Formats the validate_button to be red with white text
#validate_button{border:none;color:#fff;font-size:16px;padding:8px 20px;width:25%;background-color:#900;border-radius:5px;text-align:center;text-decoration:none;}
Javascript (goes on the question you want the button to apply to)
Qualtrics.SurveyEngine.addOnload(function()
{
//move the new button to the footer
document.querySelector("#Buttons").insert(document.querySelector("#validate_button"));
//disable the Next button when question loads
this.disableNextButton();
});
Qualtrics.SurveyEngine.addOnReady(function()
{
//always keep this
var $jq = jQuery.noConflict();
//create variables to find validation errors
var q = jQuery("#"+this.questionId);
var ve = q.find(".VaildationError");
//when Verify button is clicked, check validation and throw errors if statement true otherwise click Next
$jq('#validate_button').on('click',fuction()
{
//hide any validation errors that may have been up on the screen
ve.hide();
//put in any calucaltion and variables you need to check validity
//example of error
if($sumC1 !== expectedC1){
//take to top of screen so can see error message
document.body.scrollTop = document.documentElement.scrollTop = 0;
//set error message here
ve.html("Custom Error Message Text");
//display the error message
ve.show();
//prevent from moving to the next page
return false;
}
//if no error then click the next button
else{
jQuery('#NextButton').click();
}
});
});
Thank you bstrahin
I explored the differents parts of your code and now I can submit with this "fake button". I also can display error messages when a condition is false. But I still have to issues :
- I cannot get the answers of my questions when I click on the fake button. I'm using this code after the click function() `var test = jQuery("#"+this.questionId+" input[type=text]").eq(0).val();` (it's a form question)
The error message is diplaying four times on my survey like bellow
Can you help me please to fix that ?
This line:
var ve = q.find(".VaildationError");
finds all the elements with a class of ValidationError in the question. Then, this line:
ve.html("Custom Error Message Text");
updates the contents of all of them.
Thanks TomG. But how update the content (or find) from just one element ? I tried to get only the id of element like that :
VALIDATION.ValidationError
But it doesn't work (or I didn't use it in my JS properly).
var ve = q.find(".VaildationError").first();
Fabulous
And my last question (but no least) : do you know why I cannot get the answers of my questions when I click on the fake button. I'm using usually this code after the click function()
var test = jQuery("#"+this.questionId+" inputptype=text]").eq(0).val();
It's a form question
Excuse me I come back with my last question because I really don't understand :
Why this code works (to get value of a form with addonPageSubmit) :
Qualtrics.SurveyEngine.addOnPageSubmit(function()
{
/*Place your JavaScript here to run when the page is submitted*/
var test = jQuery("#"+this.questionId+" inputQtype=text]").eq(0).val();
Qualtrics.SurveyEngine.setEmbeddedData("ED1", test);
});
But not this (to get value of a form with the fake submit button) :
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#validate_button").on("click", function ()
{
var test = jQuery("#"+this.questionId+" inputtype=text]").eq(0).val();
Qualtrics.SurveyEngine.setEmbeddedData("ED1", test);
});
});
Thank you
https://community.qualtrics.com/XMcommunity/discussion/comment/49473#Comment_49473Post all your code.
Hi,
It would be something like that :
Qualtrics.SurveyEngine.addOnReady(function()
{
var ve = q.find(".ValidationError").first();
jQuery("#validate_button").on("click", function ()
{
var dachat = jQuery("#"+this.questionId+" inpututype=text]").eq(0).val();
if (dachat !== "Test") {
ve.hide();
document.body.scrollTop = document.documentElement.scrollTop = 0;
ve.html("Your answer is different from 'Test'");
ve.show();
return false;
}
else { jQuery('#NextButton').click();
}
});
});
https://community.qualtrics.com/XMcommunity/discussion/comment/49488#Comment_49488The difference as to why the embedded data was saved in one case but not the other is because you used addOnPageSubmit() in the first example and addOnReady in the second example. addOnPageSubmit() gets executed when the Next button is clicked and addOnReady gets executed after the page loads (before the respondent has entered anything).
You don't need to save the answer to an embedded data field. It would just be a duplicate of the question answer already included in the survey data.
Of course, but I wanna use the jQuery().on("click", function ()) to remplace the addOnPageSubmit() and to can make verifications without pass to the next question.
And when I use jQuery().on("click", function ()) I cannot getting any element of my form with jQuery("#"+this.questionId+" input[type=text]").eq(0).val();
It seems not working, while the same code works with the addOnPageSubmit()
So why ?
Hello,
Finally I changed the way to do my verifications and I used an other function with my fake validation button :
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
this.questionclick = function(event,element){
//for a single answer multiple choice question, the element type will be radio
if (element.id == 'validate_button')
{
var txt1 = jQuery("#"+this.questionId+' .InputText').eq(1).val();
alert('You wrote '+txt1);
}
}
});
With that It's working perfectly !
Tks
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.