Questions on UI for Blazor Forum

I have a question regarding the TelerikValidationMessage, which is showing in one form, but not in another. I am using data annotations on the properties of the User class.

public class User
{
    [Display(Name = "Voornaam*")]
    [Required(ErrorMessage = "Voornaam ontbreekt.")]
    [Placeholder(Description = "Voer de voornaam in.")]
    public string FirstName { get; set; }
...

The first form is a non-dynamic form with fields for every property in the User class. It is using a Model with bind-Value instead of an EditContext with Value and ValueChanged. When I press the Submit button, the validation summary is shows as are the validationmessages below the textinputs. This is the desired situation.

<TelerikForm Model="@TestUser"
                     OnValidSubmit="@HandleValidSubmit"
                     OnInvalidSubmit="@HandleInvalidSubmit">
            <FormValidation>
                <DataAnnotationsValidator></DataAnnotationsValidator>
            </FormValidation>
            <FormItems>
                
                <FormItem Field="@nameof(User.FirstName)">
                    <Template>
                        <div class="mb-3 row">
                            <label for="firstName" class="k-label k-form-label col-sm-2">Voornaam *</label>
                            <div class="col-sm-10">
                                <TelerikTextBox Id="firstName" @bind-Value="@TestUser.FirstName" InputMode="text" PlaceHolder="Voornaam"></TelerikTextBox>
                                <TelerikValidationMessage For="@(() => TestUser.FirstName)"></TelerikValidationMessage>
                            </div>
                        </div>
                    </Template>
                </FormItem>
...

Since I am trying to create a dynamic form which will work for all my classes, I have created a second form. This second form is a dynamic form using an EditContext.

<TelerikForm EditContext="@MyEditContext"
             OnValidSubmit="@HandleValidSubmit"
             OnInvalidSubmit="@HandleInvalidSubmit"
             ValidationMessageType="@FormValidationMessageType.Inline"
             >
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
        <ValidationSummary />
    </FormValidation>
    <FormItems>
        
        
        @foreach (var propertyInfo in DataContext.GetType().GetProperties())
        {
            <FormItem Field="@propertyInfo.Name">
                <Template>
                    <div class="mb-1 row">
                        <label for="@(propertyInfo.Name)" class="k-label k-form-label col-sm-2">@propertyInfo.DisplayName()</label>
                        <div class="col-sm-10">
                            <TelerikTextBox Id="@(propertyInfo.Name)"
                                            Value="@propertyInfo.GetValue(DataContext)?.ToString()"
                                            ValueExpression="@(() => propertyInfo.Name)"
                                            OnChange="OnChange"
                                            ValueChanged="@(value => OnValueChanged(value, propertyInfo.Name))"
                                            InputMode="text"
                                        PlaceHolder="@propertyInfo.PlaceholderDescription()">
                            </TelerikTextBox>
                            <TelerikValidationMessage For="@(() => propertyInfo.Name)"></TelerikValidationMessage>
                        </div>
                    </div>
                </Template>
            </FormItem>
        }
        
    </FormItems>
</TelerikForm>

And here's the imporant part of the code behind. This is proof of concept code and will be improved later.

protected void OnValueChanged(object e, string prop)
    {
        var propertyInfo = DataContext.GetType().GetProperty(prop);
        if (propertyInfo == null) return;

        if (propertyInfo.PropertyType == typeof(int))
        {
            var intValue = Convert.ToInt32(e);
            propertyInfo.SetValue(DataContext, intValue);
        }

        if (propertyInfo.PropertyType == typeof(string))
            propertyInfo.SetValue(DataContext, e.ToString());

        if (propertyInfo.PropertyType == typeof(DateTime) || propertyInfo.PropertyType == typeof(DateTime?))
            propertyInfo.SetValue(DataContext, DateTime.Now);

        if (propertyInfo.PropertyType == typeof(bool) || propertyInfo.PropertyType == typeof(bool))
            propertyInfo.SetValue(DataContext, true);
    }

    protected void OnChange(object e)
    {
        MyEditContext.Validate();
    }

When I press the submit button, the validationsummary is correctly shown, the labels color red and the border of the textinput colors red (after adding some css). So the validation seems to be working fine. However, the validationmessage below the textinput isn't showing. It isn't even in the DOM, so I assume it's not generated. I have searched the Interwebs and this forum/documentation, but I can't find the reason why the validationmessage isn't showing. Any help would be highly appreciated.

Btw; the second form shows the Inline messagetype, but that has no effect.

ValidationMessageType="@FormValidationMessageType.Inline"

ValidationMessage

updated answer on 01 Dec 2022

1 answer

61 views

TelerikForm with FluentValidation

Good Morning,

I vave this code. I try to create a FluentValdation in TelerikForm, code builts good. When i submit empty form, validations are good(), but the form doesn't show the errors.

<TelerikForm Model="@TriggerDetail" Columns="1" ColumnSpacing="25px" OnValidSubmit="@HandleValidSubmit" EditContext="@EditContext">
    <FormValidation>
        <FluentValidationValidator Validator="@Validator"></FluentValidationValidator>
    </FormValidation>    
    <FormItems>
        <FormGroup LabelText="General Information" Columns="2" ColumnSpacing="15px">
            <FormItem Field="@nameof(TriggerDetailModel.Name)" LabelText="@Localizer["JobTrigger_Name"]" Enabled="@Enabled"></FormItem>
            <ValidationMessage For="@(() => TriggerDetail.Name)" />
            <FormItem Field="@nameof(TriggerDetailModel.Group)" LabelText="@Localizer["JobTrigger_Group"]" Enabled="@Enabled">
                <Template>
                    <label class="k-label k-form-label">@Localizer["JobTrigger_Group"]</label>
                    <TelerikAutoComplete Data="@ExistingTriggerGroups" @bind-Value="@TriggerDetail.Group" ClearButton="true" Enabled="@Enabled" />
                </Template>
            </FormItem>
			<ValidationMessage For="@(() => TriggerDetail.Group)" />
		</FormGroup>
	</FormItems>
	<FormButtons>       
            <TelerikButton Icon="caret-alt-to-left" OnClick="@BackStep" ThemeColor="@(ThemeConstants.Button.ThemeColor.Error)">@Localizer["Back"]</TelerikButton>
            <TelerikButton ButtonType="ButtonType.Submit" Icon="caret-alt-to-right" ThemeColor="@(ThemeConstants.Button.ThemeColor.Info)">@Localizer["Next"]</TelerikButton>        
    </FormButtons>
</TelerikForm>
	
	
@code{
	public TriggerDetailModel TriggerDetail { get; set; } = null!;
	public TriggerDetailValidator Validator { get; set; } = new();
	
    private void HandleValidSubmit()
    {
        var validationResult = Validator.Validate(TriggerDetail);
        if (validationResult.IsValid)
        {
            NextStep();
        }
        else
        {
            //Errores
        }            
    }
}

public class TriggerDetailValidator : AbstractValidator<TriggerDetailModel>
{                
        public TriggerDetailValidator()
        {           
            RuleFor(t => t.Name).NotEmpty();
            RuleFor(t => t.Group).NotEmpty();
        }
}

Where is the problem?

Thanks

Form

ValidationMessage

answered on 18 Nov 2022

1 answer

69 views

Display TelerikTooltip without Hover or Click

Hi,

I would like to use a TelerikTooltip as validation message container, so that the user can click to close the tooltip after reading the message.

Can the TelerikTooltip be made to display immediately and then respond to clicks as normal afterwards?

Form

Tooltip

ValidationMessage

answered on 30 May 2022

1 answer

422 views

How to set dynamic validations for Form fields ?

I am working on flow, where based on users selection in dropdown, I want to update the validations of TextBox field.
Is there any way to do that ?
Becz at start we are creating model and specifying all specific validations, but now how we can apply validations based on users selection.

answered on 06 Apr 2022

1 answer

612 views

validation for dynamically rendered components

Hello I have a question related to Validation.

In our application we use forms that are dynamically rendered (without using a model). Therefor we are not able to use the TelerikFrom and its edit context. I was wondering if it is possible to do Validation on a single Property/field and show a validation message (with the Validation built by Telerik)? As far as I can see, you seem to only support validation for components wrapped in the TelerikForm/EditForm. Thanks in advance

ValidationMessage

answered on 15 Jan 2022

1 answer

864 views

Resetting A TelerikForm in Blazor back to Pristine State

I have a need to reset the form and it's validation back to a pristine state (blank form with validation) either when the form is complete and successful response is returned or by user initiated click event.

I don't see anywhere in the documentation to do so.

I have set it equal to a new instance of the FormModel, and that indeed clears the form, BUT it does not reset the form validation or any of those behaviors.

How can I reinitialize the form the same way that the form initializes on route activation?

Form

ValidationMessage

ValidationSummary

answered on 16 Nov 2021

1 answer

88 views

I Need Validation (Red Input Styles) To Show Up OnInitialized()

When the component is intialized, I need the inputs to display with the red (invalid) classes and such.

The validation is in place as when I start to enter, then backspace back to empty it TURNS red, but I need it to be red by default when the form initializes.

How do I do this using <TerlerikForm>

Form

ValidationMessage