NetcodeHub.Packages.Components.Validations 1.0.1

Install the package

           NetcodeHub.Packages.Components.Validations

Include the namespace in your project or import.razor file**

           @using NetcodeHub.Packages.Components.Validations.OnInput

User Normal components

           <EditForm Model="customer" OnValidSubmit="Save">
          <DataAnnotationsValidator />
          <label class="form-label">ID</label>
          <Number class="form-control mb-2" @bind-Value="customer.Id" />
          <ValidationMessage For="()=>customer.Id" />

          <label  class="form-label">Name</label>
          <Text class="form-control mb-2" Type="text" @bind-Value="customer.Name"  />
          <ValidationMessage For="()=>customer.Name" />

          <label  class="form-label">Email</label>
          <Text Type="email" class="form-control mb-2" @bind-Value="customer.Email"  />
          <ValidationMessage For="()=>customer.Email" />

          <label class="form-label">Password</label>
          <Text Type="password" class="form-control mb-2" @bind-Value="customer.Password" />
          <ValidationMessage For="()=>customer.Password" />

          <label class="form-label">Address</label>
          <TextArea class="form-control mb-2" @bind-Value="customer.Address" />
          <ValidationMessage For="()=>customer.Address" />

          <button class="btn btn-primary" type="submit">Save</button>
        </EditForm>

Using Floating components

          <EditForm Model="customer" OnValidSubmit="Save">
          <DataAnnotationsValidator />
          <FloatingNumber class="form-control mb-2" @bind-Value="customer.Id" Label="ID" Placeholder="eg. 123" />
          <ValidationMessage For="()=>customer.Id" />

          <FloatingText class="form-control mb-2" Type="text" @bind-Value="customer.Name" Label="Fullname" Placeholder="John Doe" />
          <ValidationMessage For="()=>customer.Name" />

          <FloatingText class="form-control mb-2" Type="email" @bind-Value="customer.Email" Label="Email Address" 
           Placeholder="[email protected]" />
          <ValidationMessage For="()=>customer.Email" />

          <FloatingText class="form-control mb-2" Type="password" @bind-Value="customer.Password" Label="User Password"  />
          <ValidationMessage For="()=>customer.Password" />

          <FloatingTextArea class="form-control mb-2" @bind-Value="customer.Address" Label="Message" Placeholder="Hello..." />
          <ValidationMessage For="()=>customer.Address" />

          <button class="btn btn-primary" type="submit">Save</button>
           <ValidationSummary/> 
         </EditForm>

          Customer customer = new();
          void Save()
          {

          }
           public class Customer
          {
              [Required, Range(5, 100)]
              public int Id { get; set; }
              [Required, MinLength(5), MaxLength(10)]
              public string? Name { get; set; }
              [Required, MinLength(5), MaxLength(15), EmailAddress]
              public string? Email { get; set; }
              [Required, MinLength(5), MaxLength(20)]
              public string? Address { get; set; }
              [Required, MinLength(5), MaxLength(10)]
              public string? Password { get; set; }
          }