Validation issues in Blazor UI

[1443403216]

Documentation

Please check the official documentation before asking questions: https://docs.abp.io

GitHub Issues

GitHub issues are for bug reports, feature requests and other discussions about the framework.

If you're creating a bug/problem report, please include followings:

• Your ABP Framework version.
  ABP version 3.2.1

• Your User Interface type (Angular/MVC/React... etc.) if the issue is related to a specific UI
  Blazor UI

• Exception message and stack trace if available (check the logs).
  

• Steps needed to reproduce the problem.

<Modal @ref="CreateProductModal">
    <ModalBackdrop />
    <ModalContent IsCentered="true">
        <ModalHeader>
            <ModalTitle>@L["NewProduct"]</ModalTitle>
            <CloseButton Clicked="CloseCreateProductModal" />
        </ModalHeader>
        <ModalBody>
            <Validations Mode="ValidationMode.Auto" Model="@NewProduct">
                <Validation>
                    <Field>
                        <FieldLabel>@L["Name"]</FieldLabel>
                        <TextEdit Placeholder="Name" @bind-Text="@NewProduct.Name">
                            <Feedback>
                                <ValidationError />
                            </Feedback>
                        </TextEdit>
                    </Field>
                </Validation>
                <Validation>
                    <Field>
                        <FieldLabel>@L["ShortDescription"]</FieldLabel>
                        <TextEdit Placeholder="ShortDescription" @bind-Text="@NewProduct.ShortDescription">
                            <Feedback>
                                <ValidationError />
                            </Feedback>
                        </TextEdit>
                    </Field>
                </Validation>
                <Validation>
                    <Field>
                        <FieldLabel>@L["Description"]</FieldLabel>
                        <TextEdit Placeholder="Description" @bind-Text="@NewProduct.Description">
                            <Feedback>
                                <ValidationError />
                            </Feedback>
                        </TextEdit>
                    </Field>
                </Validation>
            </Validations>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary"
                    Clicked="CloseCreateProductModal">
                @L["Cancel"]
            </Button>
            <Button Color="Color.Primary"
                    Clicked="CreateProductAsync">
                @L["Save"]
            </Button>
        </ModalFooter>
    </ModalContent>
</Modal>

       // Server side
        private async Task CreateProductAsync()
        {
            await ProductAppService.CreateAsync(NewProduct);
            await GetProductsAsync();
            CreateProductModal.Hide();
        }

Please write in English.
I am creating a sample application with Blazor UI by following document:
https://docs.abp.io/en/abp/latest/Tutorials/Part-1

Blazor project related packages have been updated to the latest version.
I was stuck on following issues:
1> It appears the validation message box can not block submit progress and still get an error message in the bottom left corner to let me reloading the page. Instead of showing a message box, it would be good to show error message on the form.

2> bind-* directive is case sensitive, example: bind-text should be bind-Text

3> Annotation validation message can disappear if the input value meets validation criteria but it's not working in modal dialog.

Thanks!

Stack Overflow

Please use Stack Overflow for your questions about using the framework, templates and samples:

https://stackoverflow.com/questions/tagged/abp

Use abp tag in your questions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stsrki]

@1443403216 I'm looking at this issue now and I would like some help from you. Can you please show us your Product model along with data-annotations that you use?

Regarding the 2.. That is how Blazor works. It must be case sensitive so there is no way around it.

[stsrki]

I was trying to reproduce this and the only way to show the error was to rename @bind-Text into @bind-text. Notice the lowercase!

Doing it like that is an invalid code. Text parameter must be uppercased. So, when you define @bind-text there is no way for Blazorise validation to get any information about the actual field or it's data-annotations. Meaning you will skip the client-side validation. And since there is no detected validation the form will be submitted to the backend where it will run validation on the server-side. In this step, it will detect data-annotation since it knows about the model and the supplied data. The validation will fail because @bind-text was used and nothing was submitted to the underline model. Hence, the error you were seeing.

To summarize. This is the expected behavior and @bind-Text must be used so that binding and also validation can work properly on the client-side.

[stsrki]

@hikalkan Can you agree we can close this ticket?