Real time IBAN checker or how to create a fake next button | XM Community

Real time IBAN checker or how to create a fake next button

  • 10 November 2020
  • 0 replies
  • 104 views

Badge +1

Hi,
I am working on an on-line experiment using Qualtrics. In order to pay participants, I ask them to write down their IBAN code.
For this reason I want to be able to check, when they submit the page, whether the IBAN they wrote down "makes sense" or not. I managed to find some JS code that does the trick. The code outputs a Boolean variable, based on the input being a valid IBAN or not.
Now, the problem is that I did not find a way to override the functioning of the Next Button in Qualtrics, using JavaScript.
Ideally, I would like the script to work as follows:
1) User forward page submission requests using the button.
2) IBAN validator checks if the condition is met.
3) If the condition is met the button works as it should. Otherwise the submission is denied and an alert is generated.
For now, as I did not manage to accomplish this, I am hiding the Next Button and substituting it with "Enter" key press. I post the code below.
Qualtrics.SurveyEngine.addOnload(function()
{
this.questionclick = function(event,element){
/* Save the current question's response value as global var (to be able to call it outside this.questionclick */
    window.to_test = this.getTextValue(7);


console.log(to_test);
/* Validation condition test */
if (IBAN.isValid(to_test) === true)
{
window.check = 1;
}
if (IBAN.isValid(to_test) === false)
{
window.check = 0;
}
}
/* Change input method to Enter, with input validation */


document.on("keydown", function(e) {
if (e.keyCode === 13 && check == 1) $('NextButton').click();
})

document.on("keydown", function(e) {
if (e.keyCode === 13 && check == 0)
{
alert("Please insert a valid IBAN.") ;
}
})


});

Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery('#NextButton').hide();
});
Where IBAN.isValid() is a function that calls the script saved in my library that performs the validation.
In order to obtain an equivalent result leaving unchanged the Next Button for users I was thinking of two alternatives:
1) Leave the actual Next Button hidden and create a "fake" (identical) Next Button that triggers the same procedure as pressing the "Enter" key in the code above. I can create an HTML button, but I do not know how to make it identical to the standard Next Button and how to make it function the way I want (also positioning the button in the right place is a problem, as HTML code only goes in the question text above).
2) Exploit some properties of the NextButton object to stop page sumbission on button click, if the conditions are not met.
Now, I did not find a way to implement (1) or (2). It would be amazing if anyone has any idea on how. Of course, also alternative solutions to solve the IBAN checker problem are more than welcome.

Thank you very much for your help!

Andrea


0 replies

Be the first to reply!

Leave a Reply