I have the following code with Radzen Validation. When I try to add a new entry with this form, everything works perfect. But when I open the form with a already existing entry which is loaded on init then even all the inputs like textbox are filled, the validation fires and forbids me to submit the form. When I change then the content of a textbox, even then the validators are fired. Is this a known bug? Thanks for every help.
Can you post the code you are referring?
I also have problems with validation and this also does not work properly:
<RadzenTemplateForm Data="name" TItem="string" Submit="FormSubmit">
<RadzenLabel Text="Name"></RadzenLabel>
<RadzenTextBox Name="TextBoxName" @bind-Value="name"></RadzenTextBox>
<RadzenRequiredValidator Component="TextBoxName" Text="Name is required"></RadzenRequiredValidator>
<br />
<RadzenLabel Text="@name"></RadzenLabel>
<br />
<RadzenButton ButtonType="ButtonType.Submit" Text="Save"></RadzenButton>
</RadzenTemplateForm>
@code {
string name;
void FormSubmit() { }
}Does this work with Blazor's <EditForm>? I think you need a model which is class and edit its property - as shown in our demo.
I'm going to join this topic, rather than making a new one as I'm having a similar issue. (Note for anyone concerned, Race refers to race in D&D, putting together a website / app for campaign details)
<div class="container">
<h1 class="page-title">@Race.Name</h1>
<RadzenTemplateForm TItem="Race" Data="@Race" Submit="@OnSubmit" InvalidSubmit="@OnInvalidSubmit">
<div>
<RadzenTextBox @bind-Value="@Race.Name" Name="RaceName" />
<RadzenLengthValidator Component="RaceName" Min="2" Change="" Text="Name should be at least 2 characters" Popup="false" Style="position: absolute" />
</div>
<RadzenButton ButtonType="ButtonType.Submit" Text="Update" Icon="done" Style="margin: 1rem; width: 9rem;" />
</RadzenTemplateForm>
</div>
Before hitting submit, everything seems to work fine, validator updates correctly. However once submit is pressed with an invalid value, the validator no longer seems to update. The textbox / model etc are all updating fine however.
It looks like the issue is in the validator somewhere, after pressing submit, when it searches for the component the component it returns has the data from before submit was pressed, but nothing after.
e.g. I enter "H" and then submit, afterwards if I change to a valid value "Human" and press submit, in the Validate method the component it's looking at still thinks the value is "H" even though the model / textbox and everything else sees "Human"
After much trial and error it appears to be down to my model.
Model is auto generated from a proto file and that doesn't seem to play well with the radzen validator for some reason. Creating a new class with all the same properties as that model and copying values over 'fixes' things, but that's not a tenable solution. I guess I'll have to figure something else out.
I m using DataAnnotations for my program
This my code i want use but with RadzenTemplateForm this not work . With EditForm work , i 'd like al Radzen control only this, i not add Validation tag under field. It'is a bug or my incorrect using of RadzenTemplateForm ? For the moment i solved this using EditForm or Validation Message but i' d like only RadzenTemplateForm.
Thanks
Paolo Marcolli
<RadzenTemplateForm id="edOrderHeader" Data="@orderHeader" onsubmit="@OnSaveOrderHeader">
<DataAnnotationsValidator />
<div class="row">
<div class="col-md-6">
<RadzenPanel AllowCollapse="true" Style="width: 100%; margin: 40px auto;margin-top:10px;margin-bottom:10px!important;">
<HeaderTemplate>
<h4 class="m-0 d-flex align-items-center">
<RadzenIcon Icon="list" Class="me-1" /><b>Supplier Info</b>
</h4>
</HeaderTemplate>
<ChildContent>
<RadzenFieldset>
<div class="row">
<div class="col-md-4 mb-1">
<RadzenLabel Text="Supplier Code" />
</div>
<div class="col-md-2 mb-1">
</div>
</div>
<div class="row">
<div class="col-md-4 mb-1">
<RadzenDropDownDataGrid id="Supplier.OrderHeader.IdSuppliers"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterOperator="StringFilterOperator.StartsWith"
AllowFiltering="true"
AllowClear="true"
Data=@suppliers
TextProperty="Name"
ValueProperty="Id"
@bind-Value="orderHeader.IdSuppliers"
Change=@(args => IdSuppliers_OnChange(args)) />
<ValidationMessage For="@(() => orderHeader.IdSuppliers)" />
</div>
<div class="col-md-2 mb-1">
</div>
</div>
<div class="row">
<div class="col-md-7 col-md-5 mb-1">
<RadzenText TextStyle="TextStyle.H6" Text="Vat ID" />
</div>
</div>
<div class="row">
<div class="col-md-7 col-md-5 mb-1">
@if (orderHeader.Supplier != null)
{
<RadzenText Text="@(orderHeader.Supplier?.VatNumber??"-")" />
}
else
{
<RadzenText Text="-" />
}
</div>
</div>
<div class="row">
<div class="col-md-7 col-md-5 mb-1">
<RadzenText TextStyle="TextStyle.H6" Text="Address" />
</div>
</div>
<div class="row">
<div class="col-md-7 col-md-5 mb-1">
@if (orderHeader.Supplier != null)
{
<RadzenText Text="@(orderHeader.Supplier?.GetLongAddress())" />
}
else
{
<RadzenText Text="-" />
}
</div>
</div>
<div class="row">
<div class="col-md-5 mb-1">
<RadzenText TextStyle="TextStyle.H6" Text="Workphone" />
</div>
<div class="col-md-5 mb-1">
<RadzenText TextStyle="TextStyle.H6" Text="Email" />
</div>
</div>
<div class="row">
<div class="col-md-5 mb-1">
@if (orderHeader.Supplier != null)
{
<RadzenText Text="@(orderHeader.Supplier?.WorkPhone??"-")" />
}
else
{
<RadzenText Text="-" />
}
</div>
<div class="col-md-5 mb-1">
@if (orderHeader.Supplier != null)
{
<RadzenText Text="@(orderHeader.Supplier?.Email??"-")" />
}
else
{
<RadzenText Text="-" />
}
</div>
</div>
<div class="row">
<RadzenPanel Collapsed="@ShowCollapsed" AllowCollapse="true" class="bg-light"
Expand=@(() => PanelCollapseChange("Expand")) Collapse=@(() => PanelCollapseChange("Collapse"))>
<HeaderTemplate>
<h4 class="m-0 d-flex align-items-center">
<RadzenIcon Icon="notes" Class="me-1" /><b>Reference & Note</b>
</h4>
</HeaderTemplate>
<ChildContent>
<div class="row">
<div class="col-md-12 mb-1 mb-1">
<RadzenLabel Text="Reference" />
</div>
</div>
<div class="row">
<div class="col-md-12 mb-1">
<RadzenTextBox @bind-Value="orderHeader.Reference" MaxLength="255" Class="w-100" />
</div>
</div>
<div class="row">
<div class="col-md-12 mb-1 mb-1">
<RadzenLabel Text="Note" />
</div>
</div>
<div class="row">
<div class="col-md-12 mb-1 mb-1">
<RadzenTextArea @bind-Value=@orderHeader.Note Cols="30" Rows="3" Class="w-100" />
</div>
</div>
</ChildContent>
</RadzenPanel>
</div>
</RadzenFieldset>
</ChildContent>
</RadzenPanel>
</div>
<div class="col-md-6">
<RadzenPanel AllowCollapse="true" Style="width: 100%; margin: 40px auto;margin-top:10px;margin-bottom:10px!important;">
<HeaderTemplate>
<h4 class="m-0 d-flex align-items-center">
<RadzenIcon Icon="list" Class="me-1" /><b>Order Details</b>
</h4>
</HeaderTemplate>
<ChildContent>
<RadzenFieldset Text="Order Details">
<div class="row">
<div class="col-md-4 mb-1">
<RadzenLabel Text="Code" />
</div>
<div class="col-md-4 mb-1">
<RadzenLabel Text="Issue Date" />
</div>
<div class="col-md-4 mb-1">
<RadzenLabel Text="Delivery Date" />
</div>
</div>
<div class="row">
<div class="col-md-4 mb-1">
<RadzenTextBox @bind-Value=@orderHeader.Code Placeholder="Order Code" Class="w-100" MaxLength="14"/>
<ValidationMessage For="@(() => orderHeader.Code)" />
</div>
<div class="col-md-4 mb-1">
<RadzenDatePicker @bind-Value=@orderHeader.OrderData DateFormat="d" Class="w-100" />
<ValidationMessage For="@(() => orderHeader.OrderData)" />
</div>
<div class="col-md-4 mb-1">
<RadzenDatePicker @bind-Value=@orderHeader.OrderDataDelivery DateFormat="d" Class="w-100" />
<ValidationMessage For="@(() => orderHeader.OrderDataDelivery)" />
</div>
</div>
<div class="row">
<div class="col-md-4 mb-1">
<RadzenLabel Text="Payment Type" />
</div>
<div class="col-md-4 col-md-2 mb-1">
<RadzenLabel Text="Delivery" />
</div>
</div>
<div class="row">
<div class="col-md-4 mb-1">
<RadzenDropDownDataGrid id="Supplier.OrderHeader.IdPayment"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterOperator="StringFilterOperator.StartsWith"
AllowFiltering="true"
AllowClear="true"
Data=@payments
TextProperty="Description"
ValueProperty="Id"
@bind-Value="orderHeader.IdPayment" />
<ValidationMessage For="@(() => orderHeader.IdPayment)" />
</div>
<div class="col-md-4 col-md-2 mb-1">
<RadzenDropDownDataGrid id="Supplier.OrderHeader.IdMadeGoods"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterOperator="StringFilterOperator.StartsWith"
AllowFiltering="true"
AllowClear="true"
Data=@deliveries
TextProperty="Description"
ValueProperty="Id"
@bind-Value="orderHeader.IdMadeGoods" />
<ValidationMessage For="@(() => orderHeader.IdMadeGoods)" />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-1">
<RadzenLabel Text="Category" />
</div>
<div class="col-md-6 mb-1">
<RadzenLabel Text="Department" />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-1">
<RadzenDropDownDataGrid id="Supplier.OrderHeader.IdOrdersSuppliersCategories"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterOperator="StringFilterOperator.StartsWith"
AllowFiltering="true"
AllowClear="true"
Class="w-100"
Data=@categories
TextProperty="Description"
ValueProperty="Id"
@bind-Value="orderHeader.IdOrdersSuppliersCategories" />
<ValidationMessage For="@(() => orderHeader.IdOrdersSuppliersCategories)" />
</div>
<div class="col-md-6 mb-1">
<RadzenDropDownDataGrid id="Supplier.OrderHeader.IdMaterialsDepartments"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterOperator="StringFilterOperator.StartsWith"
AllowFiltering="true"
AllowClear="true"
Data=@departments
TextProperty="Description"
ValueProperty="Id"
@bind-Value="orderHeader.IdMaterialsDepartments" />
<ValidationMessage For="@(() => orderHeader.IdMaterialsDepartments)" />
</div>
</div>
<div class="row">
<div class="form-group row py-sm-2 mb-0">
<div class="col-md-2 mb-1">
<RadzenButton ButtonStyle="ButtonStyle.Secondary" Text="Exit" Icon="logout" Click="@OnExit" class="rz-shadow-4" />
</div>
<div class="col-md-2 col-md-8 mb-1">
<RadzenButton ButtonType="ButtonType.Submit" ButtonStyle="ButtonStyle.Secondary" Text="Save" Icon="save" @onclick="@OnSaveOrderHeader" class="rz-shadow-4" />
</div>
</div>
</div>
</RadzenFieldset>
</ChildContent>
</RadzenPanel>
</div>
</div>
</RadzenTemplateForm>
Hi @Paolo_Marcolli,
I tried this code and it seems to work:
<RadzenTemplateForm TItem="Model" Data=@model Submit=@OnSubmit InvalidSubmit=@OnInvalidSubmit>
<DataAnnotationsValidator />
<RadzenFieldset Text="Personal information">
<div class="row mb-5">
<div class="col-md-4">
<RadzenLabel Text="First Name" />
</div>
<div class="col">
<RadzenTextBox style="display: block" Name="FirstName" @bind-Value=@model.FirstName Class="w-100" />
<ValidationMessage For="@(() => model.FirstName)" />
</div>
</div>
<div class="row mb-5">
<div class="col-md-4">
<RadzenLabel Text="Last Name" />
</div>
<div class="col">
<RadzenTextBox style="display: block" Name="LastName" @bind-Value=@model.LastName Class="w-100" />
<RadzenRequiredValidator Component="LastName" Text="Last name is required" Popup=@popup Style="position: absolute"/>
</div>
</div>
<RadzenButton ButtonType="ButtonType.Submit" Text="Submit" ></RadzenButton>
</RadzenFieldset>
</RadzenTemplateForm>
@code {
class Model
{
[System.ComponentModel.DataAnnotations.Required]
public string FirstName { get; set; }
public string LastName { get; set; }
}
bool popup;
Model model = new Model();
}
1 Like
Try with ValidatioSummary, that is my problem with
<ValidationMessage For="@(() => orderHeader.OrderDataDelivery)" />
also i not have problem.
<div class="row">
<div class="col-md-12">
<ValidationSummary />
</div>
</div>
Thank so much for your help. But not became mad... verify if you have the same problem & is a bug that all.
Kinds Regards
PM
Tested with Validation summary and works as well:
Here is the code:
<RadzenTemplateForm TItem="Model" Data=@model>
<DataAnnotationsValidator />
<RadzenFieldset Text="Personal information">
<div class="row mb-5">
<div class="col-md-4">
<RadzenLabel Text="First Name" />
</div>
<div class="col">
<RadzenTextBox style="display: block" Name="FirstName" @bind-Value=@model.FirstName Class="w-100" />
</div>
</div>
<div class="row mb-5">
<div class="col-md-4">
<RadzenLabel Text="Last Name" />
</div>
<div class="col">
<RadzenTextBox style="display: block" Name="LastName" @bind-Value=@model.LastName Class="w-100" />
</div>
</div>
<ValidationSummary />
<RadzenButton ButtonType="ButtonType.Submit" Text="Submit" ></RadzenButton>
</RadzenFieldset>
</RadzenTemplateForm>
@code {
class Model
{
[System.ComponentModel.DataAnnotations.Required]
public string FirstName { get; set; }
public string LastName { get; set; }
}
bool popup;
Model model = new Model();
}
Perfect , is necessary specify TItem & Data
<RadzenTemplateForm TItem="EOrder.Delivery" Data="@item" onsubmit="@OnSave">
<DataAnnotationsValidator />
......
@(IsSmall ? (MarkupString)"<ol style='visibility: hidden;'></ol>" : (MarkupString)"")
<div class="row">
<div class="col-md-12">
<ValidationSummary />
</div>
</div>
</RadzenFieldset>
</ChildContent>
</RadzenPanel>
</div>
</div>
</RadzenTemplateForm>
Problably not i have specify one of the two.
Sorry,
Thanks so much , you are very great & patient 
PM