send the form via AJAX and do its validation via fluentValidation

Question

I want to send the form via AJAX and do its validation via fluentValidation in mvc core. Please guide me about this

Answer 1

Here is a working demo , you could refer to :

• Add a reference to the FluentValidation.AspNetCore assembly by installing the appropriate NuGet package:

  Install-Package FluentValidation.AspNetCore
  

• Configure FluentValidation in your app’s Startup class by calling the AddFluentValidation extension method inside the ConfigureServices method , and use the AddFromAssemblyContaining method to automatically register all validators within a particular assembly

  services.AddMvc()
              .AddFluentValidation(fv => {
                  fv.RegisterValidatorsFromAssemblyContaining<PersonValidator>();
  
                  //If you want to disable this behaviour so that FluentValidation is the only validation library that executes,
                  //you can set the RunDefaultMvcValidationAfterFluentValidationExecutes to false in your application startup routine
                  fv.RunDefaultMvcValidationAfterFluentValidationExecutes = false;
              })
              .SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  

• Assume that the PersonValidator is defined to validate a class called Person

  public class Person
  {
     public int Id { get; set; }
     public string Name { get; set; }
     public string Email { get; set; }
     public int Age { get; set; }
  }
  
  public class PersonValidator : AbstractValidator<Person>
  {
     public PersonValidator()
    {
      RuleFor(x => x.Id).NotNull();
      RuleFor(x => x.Name).Length(0, 10);
      RuleFor(x => x.Email).EmailAddress();
      RuleFor(x => x.Age).InclusiveBetween(18, 60);
    }
  }
  

• Controller

  [HttpPost]
  public async Task<IActionResult> CreatPerson(Person person)
  {
      if (!ModelState.IsValid)
      { // re-render the view when validation failed.
          return BadRequest();
      }
  
      //Save the person to the database, or some other logic
  
      _context.Add(person);
      await _context.SaveChangesAsync();
      var message = "Person successfully created";
      return Ok(message);
  }
  

• View and related jQuery

  @model TestExample.Models.Person
  <hr />
  <div class="row">
     <div class="col-md-4">
        <form  id="formdata">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
             </div>
             <div class="form-group">
                <label asp-for="Email" class="control-label"></label>
                <input asp-for="Email" class="form-control" />
                <span asp-validation-for="Email" class="text-danger"></span>
             </div>
             <div class="form-group">
                <label asp-for="Age" class="control-label"></label>
                <input asp-for="Age" class="form-control" />
                <span asp-validation-for="Age" class="text-danger"></span>
             </div>
             <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
             </div>
       </form>
   </div>
  

  @section Scripts {
     @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
  
     <script>
          $("#formdata").submit(function (e) {
             e.preventDefault();
             var form = $(this);
             $.ajax(
             {
                type: "post",
                url: "/people/CreatPerson",
                data: form.serialize(),
                success: function (data) { alert(data); },
                error: function (data) { alert(data); }
              });
          });
     </script>
  }
  

  For more details on FluentValidation , you could refer to https://fluentvalidation.net/aspnet