Custom validation and multiple error messages | XM Community
Skip to main content
I need to create custom validation that looks at different errors that could occur. This is my survey question:



What year did you move into ___?

List year: (text box)

Or if it's easier to remember your age, enter that: (text box)



My validation looks to make sure that the year is less than/= current year and age is less than/= current year.



I also need to ensure that they enter a 4 digit year and am using" matches regex" ^[0-9]{4}$.



I created a custom message to cover the year/age issue and would like to use javascript to alert for the regex error but feel it might be too complicated. I've read that I will need to hide the "next" button, and I'm not advanced enough for that, and I'm also not sure how to reference a custom error message in javascript.



Can someone provide any direction on where to start?
Hi @Terri_Z,

you don't need to advanced to hide or disable the next button. You can copy there for example this code: `jQuery("#NextButton" ).css("visibility", "hidden");`

You could create the custom error message for example using `alert("My error message")` or you could create a HTML element with an id (`<div id = "IDofErrorElement"></div>`)and change its content: `document.getElementById("IDofErrorElement").innerHTML = "My error message";`
> @fleb said:

> Hi @Terri_Z,

> you don't need to advanced to hide or disable the next button. You can copy there for example this code: `jQuery("#NextButton" ).css("visibility", "hidden");`



Sorry to ask again, but how do a create the "fake button" to check the validation?
Hi @Terri_Z,

you can create your own HTML button with some ID and add it for example bellow your question (as in my code bellow) or just put its HTML to the footer.

If you want this button to make the respondent proceed to the next page, add following line to the on-click function on the button: `that.clickNextButton();`



Your code could look somehow like this:



jQuery(this.getQuestionTextContainer()).append('<button id = "newButton">Click me</button>');



this.hideNextButton();

var that = this;



function MyNext() {

//Your validation will be here

that.clickNextButton();}





document.getElementById("newButton").addEventListener("click", MyNext);



I appreciate you're trying to figure out the code on your own and not just trying to make others to write it for you. Good luck!

Leave a Reply


Terms & Conditions