Increase character limit in text field

Forms
1

Hi,

How would i go about increasing the character limit to 1000 in a text control field?

2

Ah nevermind, i was able to figure it out, please see below for future reference in case anybody else needs it

fd.rendered(function () {
let text = fd.field('Text1').value; // Save the initial value

function limitCharacters(fieldName) {
    var field = fd.field(fieldName);
    var newText = field.value;
    if (newText.length > 1000) {
        // Trim the value to the maximum allowed limit (1000 characters)
        field.value = text;
    } else {
        // Save the valid value
        text = newText;
    }
}

fd.field('Text1').$on('change', function () {
    limitCharacters('Text1');
});

});

3

On second thoughts. Is there a way to populate every 'Text' field at once. So instead of manually inputting the field name and changing the character length to 1000 all Text fields will just be 1000 Characters?

4

Hi @Ibrahim,

Try this:

fd.rendered(function () {
    function limitCharacters(field) {
        let newText = field.value;
        const maxLength = 10;
        if (newText.length > maxLength) {
            // Trim the value to the maximum allowed limit (maxLength)
            field.value = newText.slice(0, maxLength);
        }
    }
    
    for (let i = 0; i < fd.fields().length; i++) { // iterate through all fields on the form
        let field = fd.fields()[i];
        if (field.$options._componentTag === 'fd-textbox') { // only adjust text fields
            field.$on('change', function () {
                limitCharacters(field);
            });
        }
    }
});

Creating a separate variable for each field is inconvenient, so I opted for the slice() function. You can adjust the maxLength constant to change the character limit.

5

Thank you for the suggestion @IliaLazarevskii

If it was a notes field would the process be the same, and just swap out fd.textbox for fd.notebox?

Thanks again

6

Hey @IliaLazarevskii

Sorry to re-ping but i tried swapping out text for note however that isn't working and the function isn't running?

Any advice

7

Hi @Ibrahim,

The component tag of Note fields is fd-editor. You can check the component tags of all fields on the form with this code:

fd.rendered(function () {
    for (let i = 0; i < fd.fields().length; i++) {
        let field = fd.fields()[i];
        console.log(field.$options._componentTag);
    }
});

Copy this code into the JS editor, save the form and open it's preview, then open the browser's console with F12.

8

Hi @IliaLazarevskii I need to have 2 different fields have different character sizes, however no matter what i do i can only affect the first field group and not the second. below is my code, please let me know how i can change this to get the desired outcome

fd.rendered(function () {
// Function to apply character limits
function limitCharacters(fieldName, maxLength) {
let lastValidValue = fd.field(fieldName).value || "";

    fd.field(fieldName).$on('change', function () {
        var field = fd.field(fieldName);
        var currentValue = field.value || "";
        if (currentValue.length > maxLength) {
            console.warn(`Limit exceeded in ${fieldName}`);
            field.value = lastValidValue;
        } else {
            lastValidValue = currentValue;
        }
    });
}

// Fields with 500-character limit
const fieldsWith500Limit = [
    'generalHealth_note',
    'weightImpact_note',
    'healthGoals_note',
    'familySupport_note',
    'physicalActivity_note',
    'MHMedication_note',
    'MHSupport_Note'
];
fieldsWith500Limit.forEach(field => limitCharacters(field, 500));

// Fields with 1000-character limit
const fieldsWith1000Limit = [
    'AccessibilityRequirments',
    'motive_note',
    'OtherPhysicalHealthConditions',
    'OtherMentalHealthConditions'
];
fieldsWith1000Limit.forEach(field => limitCharacters(field, 1000));

});

Thank you

9 
fd.rendered(function () {
    function limitCharacters(fieldName, maxLength) {
        let field = fd.field(fieldName);

        if (!field) {
            console.warn(`Field "${fieldName}" is not defined.`);
            return; // Skip this field
        }

        let lastValidValue = field.value || ""; // Initialize last valid value

        field.$on('change', function () {
            let currentValue = field.value || ""; // Handle empty values
            if (currentValue.length > maxLength) {
                console.warn(`Field "${fieldName}" exceeded limit of ${maxLength} characters.`);
                field.value = lastValidValue; // Revert to last valid value
            } else {
                lastValidValue = currentValue; // Save valid value
            }
        });
    }

    const fieldsWith500Limit = [
        'generalHealth_note',
        'weightImpact_note',
        'healthGoals_note',
        'familySupport_note',
        'physicalActivity_note',
        'MHMedication_note',
        'MHSupport_Note'
    ];

    const fieldsWith1000Limit = [
        'AccessibilityRequirments',
        'motive_note',
        'OtherPhysicalHealthConditions',
        'OtherMentalHealthConditions'
    ];

    fieldsWith500Limit.forEach(field => limitCharacters(field, 500));
    fieldsWith1000Limit.forEach(field => limitCharacters(field, 1000));
});

Got it to work, above is the code for future reference

1 Like