You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The <ahref = "https://www.telerik.com/blazor-ui/validation-message"target="_blank">Telerik Validation Message for Blazor</a> adds customization options on top of the standard <ahref="https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.validationmessage-1"target="_blank">.NET ValidationMessage</a>, such as [`Template`](#template) and [`Class`](#class) parameters.
13
+
The [Telerik Validation Message for Blazor](https://www.telerik.com/blazor-ui/validation-message) adds built-in styling and customization options on top of the standard [.NET ValidationMessage](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.validationmessage-1), such as [`Template`](#template) and [`Class`](#class) parameters.
14
14
15
-
## Using Validation Message with TelerikForm
15
+
## Basics
16
16
17
-
To enable Telerik Validation Messages for a form field:
17
+
To use a Telerik Validation Message:
18
18
19
-
1. Add a `<TelerikValidationMessage>` tag near the respective `<FormItem>` tag, or [inside a form item `<Template>`](slug:form-formitems-template).
20
-
1. Provide a lambda expression in the `For` parameter that sets the associated property of the model, just like with the standard Blazor `ValidationMessage` component.
21
-
1. (optional) Disable the built-in validation messages of the Telerik Form to avoid repetition. Set `ValidationMessageType="@FormValidationMessageType.None"`.
19
+
1. Add the `<TelerikValidationMessage>` tag.
20
+
1. Set the `For` parameter in the same way as with a standard Blazor `<ValidationMessage>`. There are two options:
21
+
* If the `TelerikValidationMessage` is in the same component as the Form or if the Form model object is available, use a lambda expression that points to a property of the Form model.
public string FirstName { get; set; } = string.Empty;
31
+
}
32
+
}
33
+
````
34
+
* If the [validation message is in a child component](slug:inputs-kb-validate-child-component) that receives a `ValueExpression`, set the `For` parameter directly to the expression, without a lambda.
public Expression<System.Func<string>>? FirstNameExpression { get; set; }
41
+
}
42
+
````
43
+
44
+
Refer to the following sections for additional information and examples with the [Telerik Form](#using-with-telerikform) and standard [Blazor `<EditForm>`](#using-with-editform).
45
+
46
+
## Using with TelerikForm
47
+
48
+
The Telerik Form [displays inline validation messages by default if validation is enabled](slug:form-validation). You may need to define `<TelerikValidationMessage>` components manually when you want to:
49
+
50
+
* Use [form item templates](slug:form-formitems-template). In this case, [add the validation message in the form item template](slug:form-formitems-template#example).
51
+
* Customize the validation messages, for example, change their rendering with a [validation message template](#template). In this case, add the validation message inside a [Form item template](slug:form-formitems-template#example).
52
+
* Customize the placement of the validation messages in the Form, so that they are outside the Form item containers. In this case, consider a [`<FormItemsTemplate>`](slug:form-formitems-formitemstemplate) that gives you full control over the Form rendering between the form items. Alternatively, consider a [Telerik ValidationSummary](slug:validation-tools-summary).
53
+
54
+
>caption Use Telerik ValidationMessage in a TelerikForm
[Required(ErrorMessage = "Please enter your name")]
52
-
[MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")]
53
-
public string CustomerName { get; set; }
54
-
55
-
[Required(ErrorMessage = "Please enter your age")]
56
-
[Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")]
57
-
public int CustomerAge { get; set; }
84
+
[Required(ErrorMessage = "Please enter a first name")]
85
+
[MinLength(2, ErrorMessage = "The first name must be at least 2 characters long")]
86
+
[MaxLength(40, ErrorMessage = "The first name must be up to 40 characters long")]
87
+
public string FirstName { get; set; } = string.Empty;
58
88
59
-
[Required(ErrorMessage = "Please enter your email")]
60
-
[EmailAddress(ErrorMessage = "Enter a valid email address")]
61
-
public string EmailAddress { get; set; }
89
+
[Required]
90
+
public string LastName { get; set; } = string.Empty;
62
91
}
63
92
}
64
93
````
65
94
66
-
## Using Validation Message with EditForm
95
+
## Using with EditForm
67
96
68
-
1. Replace the `<ValidationMessage>` tags with `<TelerikValidationMessage>` tags.
69
-
1. Provide a lambda expression in the `For` parameter that sets the associated property of the model, just like with the standard Blazor `ValidationMessage` component.
97
+
In an existing Blazor `EditForm`, replace the `<ValidationMessage>` tags with `<TelerikValidationMessage>` tags. The `For` parameter is set in the same way for both validation components.
70
98
71
99
>caption Use Telerik ValidationMessage in an EditForm
[Required(ErrorMessage = "Please enter your name")]
97
-
[MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")]
98
-
public string CustomerName { get; set; }
99
-
100
-
[Required(ErrorMessage = "Please enter your age")]
101
-
[Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")]
102
-
public int CustomerAge { get; set; }
125
+
[Required(ErrorMessage = "Please enter a first name")]
126
+
[MinLength(2, ErrorMessage = "The first name must be at least 2 characters long")]
127
+
[MaxLength(40, ErrorMessage = "The first name must be up to 40 characters long")]
128
+
public string FirstName { get; set; } = string.Empty;
103
129
104
-
[Required(ErrorMessage = "Please enter your email")]
105
-
[EmailAddress(ErrorMessage = "Enter a valid email address")]
106
-
public string EmailAddress { get; set; }
130
+
[Required]
131
+
public string LastName { get; set; } = string.Empty;
107
132
}
108
133
}
109
134
````
110
135
111
136
## Template
112
137
113
-
The `TelerikValidationMessage` allows you to control its rendering via a nested `<Template>` tag. The `context` represents an `IEnumerable<string>` collection of all messages for this model property.
138
+
The Telerik ValidationMessage allows you to customize its rendering with a nested `<Template>` tag. The template `context` is an `IEnumerable<string>` collection of all messages for the validated model property.
0 commit comments