validation check by code

MyFirstBlazor/BlazingPizza/Pages/Checkout.razor

@@ -6,30 +6,50 @@
 @inject NavigationManager NavigationManager
 
 <div class="main">
-    <div class="checkout-cols">
+    <EditForm Model="Order.DeliveryAddress" OnSubmit="CheckSubmission">
-        <div class="checkout-order-details">
+        <div class="checkout-cols">
-            <h4>Review order</h4>
+            <div class="checkout-order-details">
-            <OrderReview Order="Order"/>
+                <h4>Review order</h4>
-        </div>
+                <OrderReview Order="Order"/>
+            </div>
 
-        <div class="checkout-delivery-address">
+            <div class="checkout-delivery-address">
-            <h4>Deliver to...</h4>
+                <h4>Deliver to...</h4>
-            <AddressEditor Address="Order.DeliveryAddress"/>
+                @if (isError)
+                {
+                    <div class="alert alert-danger">Please enter a name and address.</div>
+                }
+                <AddressEditor Address="Order.DeliveryAddress"/>
+            </div>
         </div>
-    </div>
 
-    <button class="checkout-button btn btn-warning" @onclick="PlaceOrder" disabled="@isSubmitting">
+        <button class="checkout-button btn btn-warning" disabled="@isSubmitting">
-        Place order
+            Place order
-    </button>
+        </button>
+    </EditForm>
 </div>
 
 @code {
     Order Order => OrderState.Order;
     bool isSubmitting;
+    bool isError = false;
 
-    async Task PlaceOrder()
+    async Task CheckSubmission(EditContext editContext)
     {
         isSubmitting = true;
+
+        var model = editContext.Model as Address;
+        isError = string.IsNullOrWhiteSpace(model?.Name)
+            || string.IsNullOrWhiteSpace(model?.Line1)
+            || string.IsNullOrWhiteSpace(model?.PostalCode);
+        if (!isError)
+            await PlaceOrder();
+
+        isSubmitting = false;
+    }
+
+    async Task PlaceOrder()
+    {
         var response = await HttpClient.PostAsJsonAsync(NavigationManager.BaseUri + "orders", OrderState.Order);
         var newOrderId = await response.Content.ReadFromJsonAsync<int>();
         OrderState.ResetOrder();

MyFirstBlazor/BlazingPizza/Shared/AddressEditor.razor

@@ -1,53 +1,45 @@
 <div class="form-field">
     <label>Name:</label>
     <div>
-        <input @ref="startName" @bind="Address.Name" />
+        <InputText @bind-Value="Address.Name" />
     </div>
 </div>
 
 <div class="form-field">
     <label>Line 1:</label>
     <div>
-        <input @bind="Address.Line1" />
+        <InputText @bind-Value="Address.Line1" />
     </div>
 </div>
 
 <div class="form-field">
     <label>Line 2:</label>
     <div>
-        <input @bind="Address.Line2" />
+        <InputText @bind-Value="Address.Line2" />
     </div>
 </div>
 
 <div class="form-field">
     <label>City:</label>
     <div>
-        <input @bind="Address.City" />
+        <InputText @bind-Value="Address.City" />
     </div>
 </div>
 
 <div class="form-field">
     <label>Region:</label>
     <div>
-        <input @bind="Address.Region" />
+        <InputText @bind-Value="Address.Region" />
     </div>
 </div>
 
 <div class="form-field">
     <label>Postal code:</label>
     <div>
-        <input @bind="Address.PostalCode" />
+        <InputText @bind-Value="Address.PostalCode" />
     </div>
 </div>
 
 @code {
     [Parameter] public Address Address { get; set; }
-
-    private ElementReference startName;
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-            await startName.FocusAsync();
-    }
 }