surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.21k stars 814 forks source link

The currency masked input doesn't work when on specific min and max values #7987

Closed JaneSjs closed 8 months ago

JaneSjs commented 8 months ago

T17291 - Unable to validate a decimal number with inputmask added https://surveyjs.answerdesk.io/internal/ticket/details/T17291


View Demo The currency masked input doesn't work when the min and max values are set to 200 and 999, respectively.

{
              type: "text",
              name: "3.08 What is your company’s annual security budget as a percentage of the overall IT budget?",
              title:
                "What is your company’s annual security budget as a percentage of the overall IT budget?",
              hideNumber: true,
              "maskType": "currency",
              "maskSettings": {
                "saveMaskedValue": true,
                "min": 200,
                "max": 999,
                "precision": 1,
                "suffix": "%"
              }
 }
JaneSjs commented 8 months ago

It appears that the min mask setting restrict values entered if they are below the specified minimum value. To allow users to enter values from 200 to 999, consider enabling survey validation in addition to masked input.

To save an unmasked (e.g. 555) value

Enable a numeric validation and disable the saveMaskedValue option to save only entered number value to survey results.

 {
       "type": "text",
       "name": "3.08 What is your company’s annual security budget as a percentage of the overall IT budget?",
       "title": "What is your company’s annual security budget as a percentage of the overall IT budget?",
       "hideNumber": true,
       "validators": [
        {
         "type": "numeric",
         "text": "The value should be between 200 and 999",
         "minValue": 200,
         "maxValue": 999
        }
       ],
       "maskType": "currency",
       "maskSettings": {
        "saveMaskedValue": false,
        "precision": 1,
        "suffix": "%",
        "max": 999
       }
 }

View Demo

To save a masked value (e.g. 555%)

If you wish to save a masked value (with a % sign), choose a Regex validation and build an expression which would allow the number and a % sign. It's mandatory to enable the saveMaskedValue option.

 {
       "type": "text",
       "name": "3.08 What is your company’s annual security budget as a percentage of the overall IT budget?",
       "title": "What is your company’s annual security budget as a percentage of the overall IT budget?",
       "hideNumber": true,
       "validators": [
        {
         "type": "regex",
         "text": "The value should be between 200 and 999",
         "regex": "^([2-9]\\d{2}|999)%$"
        }
       ],
       "maskType": "currency",
       "maskSettings": {
        "saveMaskedValue": false,
        "precision": 1,
        "suffix": "%",
        "max": 999
       }
}

View Demo