JS for formatting and masking not working | XM Community
Question

JS for formatting and masking not working

  • 16 May 2024
  • 1 reply
  • 24 views

Badge

Hello!

I have a form that requires authentication via a user ID. This ID is the same format as an SSN: XXX-XX-XXXX.

I don’t know JS, but was able to cobble together some code that I thought was validating for numbers only, entering 9 of them, and masking to keep the dashes in the format.

I was wrong and somehow, 0.8% of respondents have been able to skirt the requirements and mask.

I have been able to identify two issues - though I do not know how to fix them.

  1. The user is able to enter spaces.
  2. The user does not have to enter 9 digits. 

There are other entries that I can’t figure out how the entries occurred and cannot duplicate.

  1. One user entered a name.
  2. One user entered an email address.
  3. Once, the dashes were replaced with slashes.
  4. A few times, the dashes were replaced with zeroes.
  5. A few times, the dashes were replaced with spaces.

This is a test survey with just the ID question + JS for test.

Here is the JS:

Qualtrics.SurveyEngine.addOnReady(function()
{
    jQuery(".InputText").on("cut copy paste",function(e) {
e.preventDefault();
});
jQuery(".InputText").on('keypress',function(){
if(event.which != 8 && isNaN(String.fromCharCode(event.which))){
event.preventDefault(); //stop character from entering input
}
var s = this.value.replace(/-/g,'');
if(s.length==9){
event.preventDefault();
}
if(s.length!=0){
if(s.length>=3 && s.length<=4){
var s1 = s.slice(0,3);
var s2 =s.slice(3,s.length);
this.value=s1+"-"+s2;
}
if(s.length>=5){
var s1 = s.slice(0,3);
var s2 =s.slice(3,5);
var s3=s.slice(5,s.length);
this.value=s1+"-"+s2+"-"+s3;
}
}

});
});

If anyone can help me adjust this code, or even explain the results that I can’t duplicate, I would be eternally grateful.

Please let me know if additional information is needed.

Thank you so much,

erin


1 reply

Userlevel 2
Badge +6

Hi @molnare 

Mabey this will help you:

 

Qualtrics.SurveyEngine.addOnReady(function() {

    jQuery(".InputText").on("cut copy paste", function(e) {

        e.preventDefault();

    });

    

    jQuery(".InputText").on('input', function() {

        // Remove leading and trailing spaces

        var inputValue = this.value.trim();

        

        // Remove dashes and spaces

        var sanitizedValue = inputValue.replace(/[\s-]/g, '');

        // Check if the input contains only digits and has less than or equal to 9 characters

        if (/^\d{0,9}$/.test(sanitizedValue)) {

            // Format the input as XXX-XX-XXXX if it has 9 characters

            if (sanitizedValue.length >= 3 && sanitizedValue.length <= 9) {

                var formattedValue = sanitizedValue.replace(/(\d{3})(\d{2})(\d{0,4})/, '$1-$2-$3');

                this.value = formattedValue;

            } else {

                this.value = sanitizedValue; // Allow input without formatting

            }

        } else {

            // Clear the input if it doesn't match the required format

            this.value = '';

        }

    });

});

 

You can only type a number. No space and when you hit a letter it will turn blank. 
 

 

Leave a Reply