All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Additional Marks

Simple items may require a value or may allow a user to skip it. Both types of items can be marked with a symbol or text. Required items are those whose isRequired option is true, others are considered optional.

To specify the mark or text for required and optional items, use the requiredMark and optionalMark options. Note that the "optional" mark will not be displayed until you set the showOptionalMark option to true. You can also hide the "required" mark using the showRequiredMark option.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            position: "CEO"
        },
        items: [
            { dataField: "firstName", isRequired: true },
            { dataField: "lastName", isRequired: true },
            "position"
        ],
        requiredMark: "!",
        optionalMark: "opt",
        showOptionalMark: true
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    requiredMark="!"
    optionalMark="opt"
    [showOptionalMark]="true">
    <dxi-item dataField="firstName" [isRequired]="true"></dxi-item>
    <dxi-item dataField="lastName"  [isRequired]="true"></dxi-item>
    <dxi-item dataField="position"></dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        position: "CEO"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Each label ends with a colon. To hide it, assign false to the showColonAfterLabel option. Note that you can show/hide a colon for an individual item using the label.showColon option.

jQuery
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            position: "CEO"
        },
        showColonAfterLabel: false,
        items: ["firstName", "lastName", {
            dataField: "position",
            label: { showColon: true }
        }]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [showColonAfterLabel]="false">
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item dataField="position">
        <dxo-label [showColon]="true"></dxo-label>
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        position: "CEO"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
See Also