Currency display in text input with forced response and/or validation

Hey ​@JoaoFP , you can try addint this javascript in the question:
 

Qualtrics.SurveyEngine.addOnload(function() {
  var qid = this.questionId;
  var input = document.querySelector(`#${qid} input[type='text']`);

  input.addEventListener('input', function() {
    let raw = input.value.replace(/\D/g, ''); // Strip non-digits
    if (raw.length > 0) {
      input.value = 'U$ ' + Number(raw).toLocaleString();
    } else {
      input.value = '';
    }
  });

  // Sync raw value to EmbeddedData for backend processing
  this.getQuestionData = function() {
    let raw = input.value.replace(/\D/g, '');
    return {
      'Answer1': raw // This is the raw numeric value submitted
    };
  };
});
 

Do let me know if it works.
Regards,

 

Hi ​@rochak_khandelwal , thanks for the attempt! In SimpleLayout this code isn’t changing anything in the display, unfortunately. 

I am using a jQuery mask to try and get the job done, but one problem is that Qualtrics’ seems to only read the first digits before the first dot (so, e.g. “100.000” becomes 100) after you click Advance, which complicates validations.
 

The `$box.cleanVal() ` works well and displays the correct number as typed. Therefore, I could set an embedded data for this field. But still, it seems to close to a good solution.

This behavior also occurs if the mask uses commas instead of dots; Qualtrics will get a “100,000”, the raw value will be logged as 100000, but when clicking Advance, it will turn into a “100” all of a sudden. It also occurs if we use spaces. Therefore, it seems Qualtrics has the behavior of ignoring anything after the first special character in a number. 

Qualtrics.SurveyEngine.addOnload(function () {
  const q = this;
  const $box = jQuery(this.getQuestionContainer()).find('input[type=text]');

  // Create a wrapper with relative positioning
  $box.wrap('<div style="position: relative;"></div>');

  // Add a non-interactive prefix that overlays the beginning of the input
  $box.before('<span style="position: absolute; left: 5px; top: 50%; transform: translateY(-55%); ">R$</span>');

  // Add padding to the left of the input to make room for the prefix
  $box.css('padding-left', '30px');

  $box
      .mask('000.000.000.000.000', {reverse: true})
      .on('input', function () {
          const raw = $box.cleanVal();        // ← jQuery-Mask helper, digits only
	  		console.log("raw:", raw);
          //if (raw) {                          // any positive value?
            //  q.enableNextButton();
          //} else {
            //  q.disableNextButton();
          //}
      })
});

Hi ​@JoaoFP,

You're absolutely right: in SimpleLayout, Qualtrics seems to strip or misinterpret any characters after the first dot, comma, or space at the time of advancing to the next screen, even if cleanVal() shows the right value during input. That behavior isn't present in Classic layout, but it makes masked inputs problematic here.

To work around this, I suggest using Two-Field Strategy (Safe & Validation-Compatible)
Instead of masking the visible field directly, split input and processing:

1. Create one visible input field (masked for currency).
2. Create one hidden input field (raw numeric value only).
3. On every input change, clean the masked field using .cleanVal() and update the hidden field with just the numeric value.
4. Then use the hidden field for validation and submission.

Something like this:

Qualtrics.SurveyEngine.addOnload(function () {

  const q = this;

  const $masked = jQuery(this.getQuestionContainer()).find('input[type=text].currency-visible');

  const $hidden = jQuery(this.getQuestionContainer()).find('input[type=hidden].currency-raw');

  $masked.mask('000.000.000.000', { reverse: true }).on('input', function () {

    const raw = $masked.cleanVal(); // Only digits

    $hidden.val(raw); // Assign clean numeric string

  });

});
And in your HTML (inside question text or Look & Feel → Add Custom HTML):

<input type="text" class="currency-visible" />

<input type="hidden" class="currency-raw" name="QR~QID123" />

Please note that you need to map the hidden field to your actual question ID (QID123) so that Qualtrics picks the value for recording and validation. The visible field is just for display.

This avoids Qualtrics choking on visual formatting and ensures the backend receives only clean numbers. I’ve tested similar setups and they usually hold up better than trying to fight Qualtrics’ live parsing quirks directly.