[Templates] Imports and CSS tweaks for forms/validation (#7914)

* Add Microsoft.AspNetCore.Components.Forms to default Components imports

* Add default validation CSS rules in Components/Blazor templates

* Add default validation CSS styles to Components testassets projects

Author: SteveSandersonMS

src/Components/Blazor/Templates/src/content/BlazorHosted-CSharp/BlazorHosted-CSharp.Client/_ViewImports.cshtml

@@ -1,4 +1,5 @@
 @using System.Net.Http
+@using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Layouts
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.JSInterop

src/Components/Blazor/Templates/src/content/BlazorHosted-CSharp/BlazorHosted-CSharp.Client/wwwroot/css/site.css

@@ -84,6 +84,18 @@ app {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+
 @media (max-width: 767.98px) {
     .main .top-row {
         display: none;

src/Components/Blazor/Templates/src/content/BlazorStandalone-CSharp/_ViewImports.cshtml

@@ -1,4 +1,5 @@
 @using System.Net.Http
+@using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Layouts
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.JSInterop

src/Components/Blazor/Templates/src/content/BlazorStandalone-CSharp/wwwroot/css/site.css

@@ -84,6 +84,18 @@ app {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+
 @media (max-width: 767.98px) {
     .main .top-row {
         display: none;

src/Components/Blazor/testassets/StandaloneApp/wwwroot/css/site.css

@@ -84,6 +84,18 @@ app {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+
 @media (max-width: 767.98px) {
     .main .top-row {
         display: none;

src/Components/test/testassets/BasicTestApp/wwwroot/style.css

@@ -1,9 +1,9 @@
-.modified.valid {
-    box-shadow: 0px 0px 0px 2px rgb(78, 203, 37);
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
 }
 
 .invalid {
-    box-shadow: 0px 0px 0px 2px rgb(255, 0, 0);
+    outline: 1px solid red;
 }
 
 .validation-message {

src/Components/test/testassets/ComponentsApp.Server/wwwroot/css/site.css

@@ -84,6 +84,18 @@ app {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+
 @media (max-width: 767.98px) {
     .main .top-row {
         display: none;

src/ProjectTemplates/Web.ProjectTemplates/content/RazorComponentsWeb-CSharp/Components/_ViewImports.cshtml

@@ -1,4 +1,5 @@
 @using System.Net.Http
+@using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Layouts
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.JSInterop

src/ProjectTemplates/Web.ProjectTemplates/content/RazorComponentsWeb-CSharp/wwwroot/css/site.css

@@ -84,6 +84,18 @@ app {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+
 @media (max-width: 767.98px) {
     .main .top-row {
         display: none;