How to make DialogButton trigger EditForm validation and display ValidationMessage simultaneously?

[Brian]

Hi team,

I have a problem with Dialog Form. When user opens a dialog with some form components, without filling any content, they may directly click the "Confirm" DialogButton to try a submit. It's permitted since the OnClick event will validate the form and stop submitting. However, since DialogButton sits in the DialogButtons template and EditForm sits in Content, which means button would not be wrapped in the form tag, the clicking of DialogButton won't fire the ValidationMessage to display error messages at once like a form-wrapped common button dose. That makes users confused, because they will face the blank form with no error prompt.

Could you supply a preferred method to make ValidationMessage show up when user clicks DialogButton? Thanks.

Regards.

[Indrajith Srinivasan]

Hi Brain, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. Currently, we couldn’t wrap the built-in dialog buttons inside the form that placed in the content. But you can achieve the desired requirement by placing the form inside the <ChildContent> tags and render buttons wrapped inside the SfDialog, with the footer element class <div class="e-footer-content"> to perform the form validation. The SfDialog can be prevented from closing or submitted based form validation.  

 

We have also prepared a sample that tries to meet your requirements. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/155285/ze/SFDIAL~1-621755171 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Brian]

It's a nice sample, Thanks for help.

[Indrajith Srinivasan]

Hi Brian,

Welcome,

Please let us know if you need any further assistance.

Regards, 

Indrajith 

[Ian Williamson]

It would be simpler if the DialogButton allowed a form property like a regular button.  Then the <EditForm> control with an id with the same id would validate when the DialogButton is clicked.   Is it possible to add a form propr

[Buvana Sathasivam]

Hi Ian,

As already mentioned, our SfDialog component does not provide support for build-in dialog buttons inside the form. If you wish to add form validation, you can add the dialog buttons inside the <ChildContent> tag like in the below code.

<SfDialog @bind-Visible="@IsVisible" Width="300px" ShowCloseIcon="true" IsModal="true" Header="Dialog Form validation">      

    <ChildContent>

        <EditForm Model="@exampleModel" OnValidSubmit="HandleValidSubmit">

            <div style="padding: 10px">

                <h5>Name: </h5>

                <InputText id="name" @bind-Value="exampleModel.Name" />

                <DataAnnotationsValidator />

                <ValidationSummary Model="exampleModel.Name" />

                <br />

            </div>

            <div class="e-footer-content">

                <button class="e-btn e-primary e-flat" @onclick="@OnClick" type="submit">Submit</button>

            </div>

        </EditForm>

    </ChildContent>

</SfDialog>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SFDIAL_1-621755171_(2)1588699304

Please check the above sample and code and let us know if you have any further assistance.

Regards,

Buvana S

[Michael Pusch]

Hello Buvana,

according to https://stackoverflow.com/questions/55975262/how-to-place-submit-button-for-a-blazor-editform-outside-of-the-component this should be pretty easy.

The SfDialog is a nice component, but if the DialogButtons are no more used it looses value. Since the DialogButton is  probably a wrapper on a normal button, it seems you just have to add the property "form" to the DialogButton and it should work?!

That would be nice for me and probably others.

[Kokila Poovendran]

Hi Brian,

Thank you for reaching out to us with your suggestion. We truly appreciate your feedback and are glad to assist you.

As per your suggestion, you can achieve this by adding an "id" attribute to the EditForm and then assigning this "id" to the "form" attribute of the DialogButton. This will allow the Dialog button to function correctly outside the EditForm.

Below is a code snippet demonstrating how you can implement this:

<SfDialog @bind-Visible="@IsVisible" Width="300px" ShowCloseIcon="true" IsModal="true" Header="Dialog Form validation">

    <DialogTemplates>

        <Content>

            <EditForm id="editForm" Model="@exampleModel" OnValidSubmit="HandleValidSubmit">

                <div style="padding: 10px">

                    <h5>Name: </h5>

                    <InputText id="name" @bind-Value="exampleModel.Name" />

                    <DataAnnotationsValidator />

                    <ValidationSummary Model="exampleModel.Name" />

                    <br />

                </div>

            </EditForm>

        </Content>

    </DialogTemplates>

    <DialogButtons>

        <DialogButton Content="Submit" IsPrimary="true" Type="ButtonType.Submit" form="editForm"></DialogButton>

    </DialogButtons>

</SfDialog>

Attachment: BlazorServerProject_e25cb0d0.zip