DxTagBox<TData, TValue>.ValidateBy Property

Specifies if a TagBox located within the standard EditForm is validated by tags or values.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(TagBoxValidateBy.Auto)]
[Parameter]
public TagBoxValidateBy ValidateBy { get; set; }

Property Value

Type	Default	Description
TagBoxValidateBy	Auto	A TagBoxValidateBy enumeration value.

Available values:

Name	Description
Auto	If the Tags property is specified, the editor’s tags are validated. If the Values property is specified, the editor’s values are validated. If both Tags and Values properties are specified, the editor’s values are validated.
Tags	The editor’s tags are validated.
Values	The editor’s values are validated.

Remarks

The DevExpress UI components support the Blazor’s form validation. For more information, refer to the ASP.NET Core Blazor forms and validation MSDN article.

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