Validation not working, unable to turn off dataform validation.

[Arie Kraayenbrink]

I have a data form where the items are populated from a dynamic model and render tree builder. The problem is that all form items seem to be required. I have tried to remove any form validation but that doesn't seem to have an impact. It seems that maybe Blazor is doing the validation automatically regardless of what I have set in the dataform. I tried to use InValidSubmit but it doesn't even get called.

Here is the code I currently have for my dataform.

<SfDataForm ID="ReportForm"

            ButtonsAlignment="FormButtonsAlignment.Left"

            Model="@formElementList"

            OnSubmit="@OnSubmit"

            Width="50%"

            ValidationDisplayMode="FormValidationDisplay.Inline">

     <FormValidator>

         <DataAnnotationsValidator></DataAnnotationsValidator>

         <ValidationSummary Model="@formElementList" />

     </FormValidator>

    <FormItems>

        @CreateComponent(formElementList)

    </FormItems>

    <FormButtons>

        <SfButton Type="submit" CssClass="e-primary my-3" IsToggle="false" IsPrimary="true" Content="Request Report" Disabled="false"></SfButton>

    </FormButtons>

</SfDataForm>

[Yohapuja Selvakumaran]

Hi Arie Kraayenbrink,

Thank you for reaching out to us with your query. We understand that you're experiencing issues with form validation in your DataForm, where it appears that all form items are being treated as required, despite your attempts to adjust the validation settings.

Based on our review, it seems there might be some confusion regarding the validation events available in the DataForm component. Currently, the DataForm component does not have a specific InValidSubmit event. Instead, you can utilize the OnValidSubmit, OnSubmit and OnInvalidSubmit events to handle form submission and validation and these events are triggered as expected.

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnSubmit

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnValidSubmit

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnInvalidSubmit

To help you further, we have provided sample implementations demonstrating how to use these events:

Sample with OnValidSubmit:   https://blazorplayground.syncfusion.com/LjrftPBUraNAsDCD

Sample with OnSubmit: https://blazorplayground.syncfusion.com/BtVfjFrqhkDzPNiQ

Sample with OnInvalidSubmit:  https://blazorplayground.syncfusion.com/LDLfXFBKrOTNlmTi

For additional details on the DataForm properties and validation, please refer to the following documentation:

API Documentation:

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#properties

We hope this information helps resolve your issue. If you have any further questions or need additional assistance, please feel free to reach out.

Regards,

Yohapuja S

[Arie Kraayenbrink]

Thank you Yohapuja for your response. I made a mistake in my question and meant to refer to OnInvalidSubmit as you mentioned. I have tried using OnInvalidSubmit as well as just OnSubmit but the result is the same where I get validation that I don't want. Specifically in my case I have check boxes that for some reason are being required. Unless I check the check box the form will not submit and instead shows the message in my previous post.

In your example you have a model that is compiled and that can use the [Required] attribute. However, in my case I am using a dynamic model and building the form items with render tree builder.

Here is a sample of the way I am building my form items.

 case 4: // checkbox

 bool isChecked = false;

 builder.OpenComponent(400, typeof(SfCheckBox<bool>));

 builder.AddAttribute(401, "Label", placeHolder?.ToString() ?? "Place Holder");

 builder.AddAttribute(402, "Required", required?.ToString() ?? "false");

 builder.AddAttribute(406, "ID", IDString);

 if (checkboxAttributes != null)

 {

     builder.AddMultipleAttributes(407, checkboxAttributes);

 }

 builder.AddAttribute(408, "Label", Label ?? "Label");

 builder.AddAttribute(409, "ValueChanged",

     RuntimeHelpers.TypeCheck<Microsoft.AspNetCore.Components.EventCallback<System.Boolean>>(Microsoft.AspNetCore.Components.EventCallback.Factory.Create<System.Boolean>(this, Microsoft.AspNetCore.Components.EventCallback.Factory.CreateInferred(this,

     __value =>

     {

         /* Handle set code */

         fieldInfo.Value = __value.ToString();

         fieldInfo.UserInput = __value.ToString();

         ReportParametersDto selectedParameter = new ReportParametersDto { Key = fieldInfo.ParameterName, Value = __value.ToString() };

         selectedParameter = reportsDtoFactory.Map(fieldInfo, selectedParameter);

         selectedFilterParameters.Add(selectedParameter);

     }, isChecked))));

 builder.CloseComponent();

 break;

[Yohapuja Selvakumaran]

Hi Arie Kraayenbrink,

Thank you for your inquiry. Based on the information you shared, it seems that you are encountering unexpected validation behavior with checkboxes in your dynamically generated form, where checkboxes are incorrectly being marked as required.

To assist you, we have created a sample that demonstrates how to build a form using SfDataForm with proper validation handling, including the use of checkboxes. This example utilizes a strongly-typed model with validation attributes.

Code Snippet:

 

@using Syncfusion.Blazor

@using Syncfusion.Blazor.DataForm

@using Syncfusion.Blazor.Buttons

@using System.ComponentModel.DataAnnotations

@using Syncfusion.Blazor.Inputs

 

<SfDataForm ID="MyForm"

            Model="@SignUpModel"

            Width="50%"

            ButtonsAlignment="FormButtonsAlignment.Right">

    <FormValidator>

        <DataAnnotationsValidator></DataAnnotationsValidator>

        <ValidationSummary></ValidationSummary>

    </FormValidator>

    <FormItems>

        <FormItem Field="@nameof(SignUpModel.FirstName)" LabelText="First Name"></FormItem>

        <FormItem Field="@nameof(SignUpModel.LastName)" LabelText="Last Name"> </FormItem>

        <FormItem Field="@nameof(SignUpModel.Email)" LabelText="Email Id"> </FormItem>

        <FormItem Field="@nameof(SignUpModel.Password)" LabelText="Password" EditorType="FormEditorType.Password"> </FormItem>

        <FormItem Field="@nameof(SignUpModel.ConfirmPassword)" LabelText="Confirm Password" EditorType="FormEditorType.Password"> </FormItem>

        <FormItem Field="@nameof(SignUpModel.Accept)" LabelText="Agree to the terms and conditions"> </FormItem>

    </FormItems>

 

    <FormButtons>

        <SfButton>SignUp</SfButton>

    </FormButtons>

 

</SfDataForm>

 

@code {

 

    public class SignUpDetails

    {

 

        [Required(ErrorMessage = "Please enter first name")]

        public string FirstName { get; set; }

 

        [Required(ErrorMessage = "Please enter last name")]

        public string LastName { get; set; }

 

        [Required(ErrorMessage = "Please enter password")]

        public string Password { get; set; }

 

        [Required(ErrorMessage = "Please enter confirm password")]

        public string ConfirmPassword { get; set; }

 

        [Required(ErrorMessage = "Please enter the email id")]

        public string Email { get; set; }

 

        [Required(ErrorMessage = "You need to agree to the Terms and Conditions")]

        [Range(typeof(bool), "true", "true", ErrorMessage = "You need to agree to the Terms and Conditions")]

        public bool Accept { get; set; }

    }

 

    private SignUpDetails SignUpModel = new SignUpDetails();

}

 

 

You can find the runnable sample below,

Sample: https://blazorplayground.syncfusion.com/LtBJXlAtfJIvvnWU

For more information, you can refer to the below documentation,

Documentation:  https://blazor.syncfusion.com/documentation/data-form/validation

Regards,

Yohapuja S