Code fix for Phone field accepting non numeric characters

Author: TriJayDore

src/Modules/SimplCommerce.Module.Checkouts/Areas/Checkouts/ViewModels/ShippingAddressVm.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
@@ -12,6 +13,9 @@ public class ShippingAddressVm
 
         public string ContactName { get; set; }
 
+        [Required(ErrorMessage = "Phone number is required")]
+        [Phone(ErrorMessage = "Please enter a valid phone number")]
+        [StringLength(20, MinimumLength = 10, ErrorMessage = "Phone number must be between 10 and 20 characters")]
         public string Phone { get; set; }
 
         public string AddressLine1 { get; set; }

src/Modules/SimplCommerce.Module.Checkouts/Areas/Checkouts/Views/Checkout/Shipping.cshtml

@@ -83,7 +83,8 @@
                 <div class="form-group row">
                     <label class="col-sm-4 col-form-label">@Localizer["Phone"]</label>
                     <div class="col-sm-8">
-                        <input asp-for="NewAddressForm.Phone" type="text" class="form-control">
+                        <input asp-for="NewAddressForm.Phone" type="tel"inputmode="numeric" class="form-control"
+                               oninput="this.value = this.value.split('').filter(function(c){return c >= '0' && c <= '9';}).join('');">
                     </div>
                 </div>
             </div>
@@ -174,7 +175,8 @@
                     <div class="form-group row">
                         <label class="col-sm-4 col-form-label">@Localizer["Phone"]</label>
                         <div class="col-sm-8">
-                            <input asp-for="NewBillingAddressForm.Phone" type="text" class="form-control">
+                            <input asp-for="NewBillingAddressForm.Phone" type="tel" inputmode="numeric" class="form-control"
+                                   oninput="this.value = this.value.split('').filter(function(c){return c >= '0' && c <= '9';}).join('');">
                         </div>
                     </div>
                 </div>