How to execute javascript after validation error | XM Community
Skip to main content

Very similar problem to https://www.qualtrics.com/community/discussion/5488/a-validation-error-resfreshes-the-page-and-javascript-wont-execute-why
For most of my questions i don't want the next button so have hidden it globally using CSS styles file. On the few blocks that i do want it I have brought it back using Javascript inside the block. For all but one blocks this works very well.
The problem is for the one block containing a request for email which has javascript that overides the CSS and brings the next block back. The question in this block using validation to see if input is actually an email. When validation is performed it seems to reload part of the DOM which comes through with the original CSS but not the Javascript and so the next button is hidden.
I've tried targeting the next button of this specific block in CSS but nothing in the button is unique enough to target as a selector (see picture). I tried the page-id but this is randomly generated each time it seems.
I've also tried targeting the Button's relation to unique parents/ancestors or siblings but none of these are unique.
The only thing that is unique enough to target is the block ID but this is in the child of a sibling and after bit of research it seems CSS doesn't support using "x that has a sibling that has a child like ..." as a selector.
Is there an if, else JQuery statement i could put in the global header that would show the next button?
I was thinking something along the lines of
if block id == Q111
then
show the next button
I tested changing the colour of all next buttons in global javascript header and this DOES NOT get overridden by application of the email validation.
Worst case scenario i can reverse my pattern, take out the CSS hiding the next button and instead use in-block-javascript to hide it on the blocks where i want it hidden. It's just that I have a lot of blocks and the vast majority are meant to have the next button hidden. Thought i'd ask in case the JQuery solution is obvious to others.
I'm very comfortable with CSS but less so with Javascript and JQuery

image.png

image.pngFound a fix albeit a really hacky one. This makes sure that the CSS gets overidden


Leave a Reply