Validation: accessibility improvements (#6480)

* validate on blur

* UseValidationOnBlur

* AriaRequired

* validation feedback

* adjust fluentui2

* tailwind validation

* bulma validation

* fix fluent passwordstrength

* bulma rte

* material

* markdown validation demo

* fix markdown colors

* markdown styles

* antdesign

* bootstrap

* test

* bulma check

* bulma markdown

* fluent markdown

* tailwind markdown

* fix validation examples

* fix validation selectors

* material selectors

* tailwind selectors

* bulma selectors

* fluent selectors

* antdesign selectors

* always apply AriaRequired

Author: stsrki

Demos/Blazorise.Demo/Pages/Tests/MarkdownPage.razor

@@ -31,12 +31,36 @@
                 </Row>
             </CardBody>
         </Card>
+        <Card Margin="Margin.Is4.OnY">
+            <CardHeader>
+                <CardTitle>Markdown validation</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <Validations @ref="markdownValidations" Mode="ValidationMode.Manual">
+                    <Validation Validator="@ValidationRule.IsNotEmpty">
+                        <Field>
+                            <FieldLabel>Message</FieldLabel>
+                            <FieldBody>
+                                <Markdown @bind-Value="@markdownValidationValue" MinHeight="160px">
+                                    <Feedback>
+                                        <ValidationError>Please enter a message.</ValidationError>
+                                    </Feedback>
+                                </Markdown>
+                            </FieldBody>
+                        </Field>
+                    </Validation>
+                    <Button Color="Color.Primary" Clicked="@ValidateMarkdownAsync">Submit</Button>
+                </Validations>
+            </CardBody>
+        </Card>
     </Column>
 </Row>
 @code {
     Markdown markdownRef;
+    Validations markdownValidations;
 
     string markdownValue = "# EasyMDE \n Go ahead, play around with the editor! Be sure to check out **bold**, *italic*, [links](https://google.com) and all the other features. You can type the Markdown syntax, use the toolbar, or use shortcuts like `ctrl-b` or `cmd-b`.";
+    string markdownValidationValue;
 
     string markdownHtml;
 
@@ -56,6 +80,11 @@
         return Task.CompletedTask;
     }
 
+    async Task ValidateMarkdownAsync()
+    {
+        await markdownValidations.ValidateAll();
+    }
+
     //string fileContent;
     int fileProgress;
 

Documentation/Blazorise.Docs/Pages/Docs/Components/Validations/ValidationPage.razor

@@ -256,19 +256,13 @@
         By default, the form is auto-validated on page load. To validate only after the user starts entering fields,
         set <Code>ValidateOnLoad</Code> to false.
     </DocsPageSectionHeader>
-    <DocsPageSectionContent Outlined FullWidth>
-        <AutoValidationExample />
-    </DocsPageSectionContent>
     <DocsPageSectionSource Code="AutoValidationExample" />
 </DocsPageSection>
 
 <DocsPageSection>
     <DocsPageSectionHeader Title="Validation rules">
         Blazorise includes some predefined validation rules, e.g.:
     </DocsPageSectionHeader>
-    <DocsPageSectionContent Outlined FullWidth>
-        <ValidationRulesExample />
-    </DocsPageSectionContent>
     <DocsPageSectionSource Code="ValidationRulesExample" />
 </DocsPageSection>