maxlength property not working for number inputs in multipletext question type

[UNheardoff]

JSON code:

Survey preview: In the preview above, the maxlength property is not applied to the pincode input. The expected behaviour is to the one similar to the state input.

Also, it would be useful if,

1. Support for "requiredIf" condition is added to the items of multipletext questions.
2. Support for type: "dropdown" for items of multipletext questions. [useful in this case for question name: "state"]
3. Support to disable the spin for number input.

Thanks.

[JaneSjs]

Hi @UNheardoff, The maxLength setting is avaialble for text input types only. If you wish to limit the maximum entered number, specify the max attribute.

"inputType": "number",
"min": 10,
"max": 10000

Regarding those additional requirements: the multiple textboxes element is used to display a group of single-line input fields. If you require some advanced functionalities like requiredIf and dropd-down input types, consider using separate questions and combining them within a single logical element using a panel. Consider the following demo:

{
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "panel",
     "name": "addressPanel",
     "elements": [
      {
       "type": "text",
       "name": "qAddress",
       "title": "Address"
      },
      {
       "type": "text",
       "name": "area",
       "title": "Area"
      },
      {
       "type": "text",
       "name": "city",
       "visibleIf": "{qAddress} notempty and {area} notempty",
       "title": "City"
      },
      {
       "type": "dropdown",
       "name": "state",
       "visibleIf": "{qAddress} notempty and {area} notempty",
       "title": "State",
       "choices": [
        {
         "value": "Item 1",
         "text": "State 1"
        },
        {
         "value": "Item 2",
         "text": "State 2"
        },
        {
         "value": "Item 3",
         "text": "State 3"
        }
       ]
      },
      {
       "type": "text",
       "name": "pincode",
       "visibleIf": "{qAddress} notempty and {area} notempty",
       "title": "Pincode",
       "description": "Enter a valid 6-digit pincode",
       "descriptionLocation": "underInput",
       "maskType": "pattern",
       "maskSettings": {
        "pattern": "######"
       }
      }
     ],
     "questionTitleLocation": "left",
     "title": "Address",
     "showQuestionNumbers": "off"
    }
   ]
  }
 ]
}

Use a Dropdown question for State values. You can also retrieve a state list from an API endpoint (View Demo). You can use a Pattern input mask to implement the Pincode input field.

I hope this information helps. Let me know if you require further assistance.

[UNheardoff]

@JaneSjs. Thank you. Would it be possible to default a numeric keyboard for mobile devices for pincode? Also, the problem with maskedinput type is that it doesn't allow setting an error natively and the input just disappears if the pattern doesn't match. A hack for pincode with desired requirements would be to set the inputType as tel with maxLength: 6.

{ "type": "text", "name": "pincode", "title": "Pincode", "validators": [ { "type": "regex", "text": "Please enter a valid 6-digit pincode", "regex": "^[1-9][0-9]{5}$" } ], "inputType": "tel", "maxLength": 6 }

Other issues/enhancement/query:

1. Calling .clear() on survey modal clears the values as it should but not the errors. I'm looking for a reset of the survey page.
2. Currency mask with support for Indian number system? grouping the hundredth, tens and ones place together and the rest by two. eg: 44,23,456.99 INR.

Thanks again.

[JaneSjs]

Hello @UNheardoff,

1. If you wish to enable the numeric keyboard, enable the number input type: View Demo. If you wish to ensure that the value entered doesn't go beoynd the specific limits, enable numeric validation: View Demo.
2. To reset a page's field values including invalid values, iterate through page.questions and reset question.value. For instance:

   survey.currentPage.questions.forEach((question) => {
   question.value = undefined;
   });

   Refer to the following demo to learn how to add a custom Clear Page button which clears page values: Custom Navigation Buttons.

Currency mask with support for Indian number system? grouping the hundredth, tens and ones place together and the rest by two. eg: 44,23,456.99 INR.

Unfortunately, we do not offer a built-in input mask support for this input type. However, you can implement a custom input mask pattern and format the value entered as needed. An example of a custom input mask is available at Pattern Input Mask variable length.