DxTagBox<TData, TValue>.ShowValidationIcon Property

Specifies whether a tag box shows validation icons.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public bool ShowValidationIcon { get; set; }

Property Value

Type	Description
Boolean	true to display validation icons; otherwise, false.

Remarks

DxTagBox supports data validation. You can add the editor to Blazor’s standard EditForm. This form validates user input based on data annotation attributes defined in a model. When a user enters invalid data into the editor, the editor is marked with a red outline. You can also use the ShowValidationIcon property to specify whether the editor should display validation icons - error or success .

The code below uses the ValidateBy property to validate email addresses (custom tags) specified in the TagBox. In this example the following validation settings are specified:

• the ValidateBy property is set to TagBoxValidateBy.Tags;
• the Tags property’s bound field is marked with the Required and custom data annotation attributes that validate email formats.

After a user types an email address, the edit box is underlined in red or green: red indicates the editor contains an invalid tag(s) or is empty; green indicates the tags are valid.

Markup

<EditForm Model="@recipients" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
    <DataAnnotationsValidator />
    <p>
        <label for="emails">Recipients:</label>
        <DxTagBox Id="emails"
                  NullText="Select email recipients"
                  Data="@Emails.DataSource"
                  TData="string"
                  TValue="string"
                  AllowCustomTags="true"
                  ValidateBy="TagBoxValidateBy.Tags"
                  ShowValidationIcon="true"
                  @bind-Tags="@recipients.Data">
        </DxTagBox>
        <ValidationMessage For="@(() => recipients.Data)" />
    </p>
    <button type="submit">Submit</button>
</EditForm>

@code {
    EmailRecipients recipients = new EmailRecipients();

    private void HandleValidSubmit() {
        Console.WriteLine("OnValidSubmit");
    }
    private void HandleInvalidSubmit() {
        Console.WriteLine("OnInvalidSubmit");
    }
} 

EmailAddressesAttribute

using System.ComponentModel.DataAnnotations;

public class EmailRecipients {
    [Required]
    [EmailAdresses(ErrorMessage = "Invalid email")]
    public IEnumerable<string> Data { get; set;}
} 

[AttributeUsage(AttributeTargets.Property | AttributeTargets.Field | AttributeTargets.Parameter, AllowMultiple = false)]
public class EmailAdressesAttribute: ValidationAttribute {
    public override bool IsValid(object value) {
        IEnumerable<string> data = value as IEnumerable<string>;
        if (data != null) {
            foreach (var item in data)
                if (!item.Contains("@") || !item.Substring(item.IndexOf('@')).Contains("."))
                    return false;
            return true;
        } else
            return false;
    }
}

For more information, refer to the following help topic: Validate Input.

Run Demo: TagBox - Validation