Validation

The DevExpress Bootstrap editors provide a universal mechanism for performing data validation on both the client and server. You can access the validation settings of a data editor through the editor’s ValidationSettings property.

You can provide the required validation logic by declaring that the editor is a required input field, or by specifying a regular expression to check user input.

<div class="form-group">
    <dx:BootstrapTextBox NullText="Enter Name..." Caption="Name" runat="server">
        <ValidationSettings ValidationGroup="Validation">
            <RequiredField IsRequired="true" ErrorText="Name is required" />
        </ValidationSettings>
    </dx:BootstrapTextBox>
</div>
<div class="form-group">
    <dx:BootstrapDateEdit NullText="Select Birthday..." Caption="Birthday" runat="server">
        <ClientSideEvents Validation="onBirthdayValidation" />
        <ValidationSettings ValidationGroup="Validation">
            <RequiredField IsRequired="true" ErrorText="Birthday is required" />
        </ValidationSettings>
    </dx:BootstrapDateEdit>
</div>
<div class="form-group">
    <dx:BootstrapComboBox DropDownStyle="DropDown" NullText="Select Occupation..." Caption="Occupation" runat="server">
        <ClearButton DisplayMode="OnHover" />
        <ValidationSettings ValidationGroup="Validation">
            <RequiredField IsRequired="true" ErrorText="Occupation is required" />
        </ValidationSettings>
        <Items>
            ...
        </Items>
    </dx:BootstrapComboBox>
</div>
<div class="form-group">
    <dx:BootstrapButtonEdit ClearButton-DisplayMode="OnHover" NullText="Enter E-mail..." Caption="E-mail" runat="server">
        <ValidationSettings ValidationGroup="Validation">
            <RequiredField IsRequired="true" ErrorText="E-mail is required" />
            <RegularExpression ErrorText="Invalid e-mail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
        </ValidationSettings>
        <Buttons>
            <dx:BootstrapEditButton IconCssClass="fa fa-envelope" />
        </Buttons>
    </dx:BootstrapButtonEdit>
</div>
<div class="form-group">
    <dx:BootstrapTextBox NullText="Enter Phone Number..." Caption="Phone Number" runat="server">
        <ValidationSettings ValidationGroup="Validation">
            <RequiredField IsRequired="true" ErrorText="Phone Number is required" />
            <RegularExpression ValidationExpression="\(?\b[0-9]{3}\)?[-. ]?[0-9]{3}[-. ]?[0-9]{4}\b" ErrorText="Please input missing digits" />
        </ValidationSettings>
        <MaskSettings Mask="+1 (999) 999-9999" IncludeLiterals="None" />
    </dx:BootstrapTextBox>
</div>
<dx:BootstrapButton runat="server" Text="OK" SettingsBootstrap-RenderOption="Primary">
    <ClientSideEvents Click="function(s, e) { e.processOnServer = ASPxClientEdit.ValidateGroup('Validation'); }" />
    <CssClasses Icon="fa fa-check" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Cancel" SettingsBootstrap-RenderOption="Link" AutoPostBack="false">
    <ClientSideEvents Click="function(s, e) { ASPxClientEdit.ClearGroup('Validation'); }" />
</dx:BootstrapButton>

Custom Validation

The DevExpress Bootstrap editors allow you to provide custom validation logic to an editor. To achieve this goal, handle the editor’s Validation event on the server side, client side, or both.

<div class="form-group">
    <dx:BootstrapTextBox ID="NameTextBox" Caption="Name" EnableClientSideAPI="true" OnValidation="NameTextBox_Validation" runat="server">
        <ClientSideEvents Validation="onNameValidation" />
        <ValidationSettings ValidationGroup="CustomValidation" SetFocusOnError="true" ErrorText="Name must be at least two characters long">
            <RequiredField IsRequired="true" ErrorText="Name is required" />
        </ValidationSettings>
    </dx:BootstrapTextBox>
</div>
<div class="form-group">
    <dx:BootstrapTextBox ID="AgeTextBox" Caption="Age" EnableClientSideAPI="true" OnValidation="AgeTextBox_Validation" runat="server">
        <ClientSideEvents Validation="onAgeValidation" />
        <ValidationSettings ValidationGroup="CustomValidation" SetFocusOnError="true" ErrorText="Age must be greater than or equal 18"></ValidationSettings>
    </dx:BootstrapTextBox>
</div>
<div class="form-group">
    <dx:BootstrapDateEdit ID="ArrivalDateEdit" Caption="Arrival date" EnableClientSideAPI="true" OnValidation="ArrivalDateEdit_Validation" runat="server">
        <ClientSideEvents Validation="onArrivalDateValidation" />
        <ValidationSettings ValidationGroup="CustomValidation" SetFocusOnError="true" ErrorText="Arrival date is required and must belong to the current month">
            <RequiredField IsRequired="true" ErrorText="" />
        </ValidationSettings>
    </dx:BootstrapDateEdit>
</div>
<dx:BootstrapButton runat="server" Text="OK" SettingsBootstrap-RenderOption="Primary">
    <ClientSideEvents Click="function(s, e) { e.processOnServer = ASPxClientEdit.ValidateGroup('CustomValidation'); }" />
    <CssClasses Icon="fa fa-check" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Cancel" SettingsBootstrap-RenderOption="Link" AutoPostBack="false">
    <ClientSideEvents Click="function(s, e) { ASPxClientEdit.ClearGroup('CustomValidation'); }" />
</dx:BootstrapButton>
Screen Size
Color Themes
Demo QR Code