JavaScript/jQuery Validator - StringLengthRule

A validation rule that demands the target value length be within the specified value range (including the range's end points).

import { StringLengthRule } from "devextreme/common"
Type:

Object

To specify the range that the validated value length must match, set the rule's min and max configuration properties.

NOTE
This rule validates string values or the values that can be cast to a string.

View Demo

See Also

ignoreEmptyValue

If set to true, empty values are valid.

Type:

Boolean

Default Value: false

max

Specifies the maximum length allowed for the validated value.

Type:

Number

message

Specifies the message that is shown if the rule is broken.

Type:

String

Default Value: 'The length of the value is not correct'

You can configure an error message in the following ways:

  • Specify a hard-coded message:

    jQuery
    index.js
    $("#textBox").dxTextBox({
    // ...
}).dxValidator({
    type: "stringLength",
    message: "My custom message"
});
    Angular
    app.component.html
    app.module.ts
    <dx-text-box>
    <dx-validator>
        <dxi-validator-validation-rule
            type="stringLength"
            message="My custom message">
        </dxi-validator-validation-rule>
    </dx-validator>
</dx-text-box>
    import { DxValidatorModule, DxTextBoxModule } from 'devextreme-angular';
// ...

@NgModule({
    imports: [
        DxTextBoxModule,
        DxValidatorModule,
    ],
})
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator>
            <DxStringLengthRule
                message="My custom message"
            />
        </DxValidator>
    </DxTextBox>
</template>

<script setup lang="ts">
import { DxTextBox } from 'devextreme-vue/text-box';
import { DxValidator, DxStringLengthRule } from 'devextreme-vue/validator';

</script>
    React
    App.tsx
    import { TextBox } from 'devextreme-react/text-box';
import { Validator, StringLengthRule } from 'devextreme-react/validator';

function App() {
    return (
        <TextBox>
            <Validator>
                <StringLengthRule
                    message="My custom message"
                />
            </Validator>
        </TextBox>
    );
}

  • Hide the message:

    jQuery
    index.js
    $("#textBox").dxTextBox({
    // ...
}).dxValidator({
    type: "stringLength",
    message: ""
});
    Angular
    app.component.html
    <dx-text-box>
    <dx-validator>
        <dxi-validator-validation-rule
            type="stringLength"
            message="">
        </dxi-validator-validation-rule>
    </dx-validator>
</dx-text-box>
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator>
            <DxStringLengthRule
                message=""
            />
        </DxValidator>
    </DxTextBox>
</template>
    React
    App.tsx
    import { TextBox } from 'devextreme-react/text-box';
import { Validator, StringLengthRule } from 'devextreme-react/validator';

function App() {
    return (
        <TextBox>
            <Validator>
                <StringLengthRule
                    message=""
                />
            </Validator>
        </TextBox>
    );
}

  • Display the editor's name in the default message (for instance, "The length of the password is not correct"):

    jQuery
    index.js
    $("#textBox").dxTextBox({
    // ...
}).dxValidator({
    name: "password",
    validationRules: [{
        type: "stringLength",
    }],
});
    Angular
    app.component.html
    <dx-text-box>
    <dx-validator name="password">
        <dxi-validator-validation-rule
            type="stringLength"
        ></dxi-validator-validation-rule>
    </dx-validator>
</dx-text-box>
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator name="password">
            <DxStringLengthRule />
        </DxValidator>
    </DxTextBox>
</template>
    React
    App.tsx
    import { TextBox } from 'devextreme-react/text-box';
import { Validator, StringLengthRule } from 'devextreme-react/validator';

function App() {
    return (
        <TextBox>
            <Validator name="password">
                <StringLengthRule />
            </Validator>
        </TextBox>
    );
}

min

Specifies the minimum length allowed for the validated value.

Type:

Number

trim

Indicates whether or not to remove the Space characters from the validated value.

Type:

Boolean

Default Value: true

To keep the Space characters within the validated value, set this field to false.

type

Specifies the rule type. Set it to "stringLength" to use the StringLengthRule.

Type:

ValidationRuleType