Custom validation with JS

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"

• Formats the validate_button to be red with white text

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)

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+" input[type=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+" input[type=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+" input[type=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+" input[type=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