Vue Validator - StringLengthRule

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

import { DxValidationRulesTypes } from "devextreme-vue/validation-rules"
Type: DxValidationRulesTypes.StringLengthRule

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.

Selector: ignore-empty-value
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'

An error message can be specified as follows:

  • Hard-code the message

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

import { DxValidatorModule,
         DxTextBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        DxTextBoxModule,
        BrowserModule,
        DxValidatorModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator>
            <DxStringLengthRule
                message="My custom message"
            />
        </DxValidator>
    </DxTextBox>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTextBox } from 'devextreme-vue/text-box';
import {
    DxValidator,
    DxStringLengthRule
} from 'devextreme-vue/validator';

export default {
    components: {
        DxTextBox,
        DxValidator,
        DxStringLengthRule
    }
}
</script>
    React
    App.js
    import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { TextBox } from 'devextreme-react/text-box';
import {
    Validator,
    StringLengthRule
} from 'devextreme-react/validator';

class App extends React.Component {
    render() {
        return (
            <TextBox>
                <Validator>
                    <StringLengthRule
                        message="My custom message" />
                </Validator>
            </TextBox>
        );
    }
}
export default App;

  • Hide the message

    jQuery
    index.js
    $(function() {
    $("#textBox").dxTextBox({ ... })
        .dxValidator({
            type: "stringLength",
            message: ""
        });
});
    Angular
    app.component.html
    app.module.ts
    <dx-text-box>
    <dx-validator>
        <dxi-validation-rule 
            type="stringLength" 
            message="">
        </dxi-validation-rule>
    </dx-validator>
</dx-text-box>
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

 import { DxValidatorModule,
          DxTextBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxValidatorModule,
        DxTextBoxModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator>
            <DxStringLengthRule
                message=""
            />
        </DxValidator>
    </DxTextBox>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTextBox } from 'devextreme-vue/text-box';
import {
    DxValidator,
    DxStringLengthRule
} from 'devextreme-vue/validator';

export default {
    components: {
        DxTextBox,
        DxValidator,
        DxStringLengthRule
    }
}
</script>
    React
    App.js
    import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { TextBox } from 'devextreme-react/text-box';
import {
    Validator,
    StringLengthRule
} from 'devextreme-react/validator';

class App extends React.Component {
    render() {
        return (
            <TextBox>
                <Validator>
                    <StringLengthRule
                        message="" />
                </Validator>
            </TextBox>
        );
    }
}
export default App;

  • Display the editor's name in the message

    jQuery
    index.js
    $(function() {
    $("#textBox").dxTextBox({ ... })
        .dxValidator({
            name: "password", // The error message will be "The length of the password is not correct"
            validationRules: [{
                type: "stringLength"
            }]
        });
});
    Angular
    app.component.html
    app.module.ts
    <dx-text-box>
    <!-- The error message will be "The length of the password is not correct" -->
    <dx-validator name="password">
        <dxi-validation-rule 
            type="stringLength">
        </dxi-validation-rule>
    </dx-validator>
</dx-text-box>
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxValidatorModule,
         DxTextBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxValidatorModule,
        DxTextBoxModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
    Vue
    App.vue
    <template>
    <DxTextBox>
        <!-- The error message will be "The length of the password is not correct" -->
        <DxValidator name="password">
            <DxStringLengthRule />
        </DxValidator>
    </DxTextBox>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTextBox } from 'devextreme-vue/text-box';
import {
    DxValidator,
    DxStringLengthRule
} from 'devextreme-vue/validator';

export default {
    components: {
        DxValidator,
        DxStringLengthRule
    }
}
</script>
    React
    App.js
    import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { TextBox } from 'devextreme-react/text-box';
import {
    Validator,
    StringLengthRule
} from 'devextreme-react/validator';

class App extends React.Component {
    render() {
        return (
            <TextBox>
                {/* The error message will be "The length of the password is not correct" */}
                <Validator name="password">
                    <StringLengthRule} />
                </Validator>
            </TextBox>
        );
    }
}

export default App;

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:

String

Accepted Values: 'required' | 'numeric' | 'range' | 'stringLength' | 'custom' | 'compare' | 'pattern' | 'email' | 'async'