ModelState validation using Ajax call and JQuery unobstrusive

Question

Hy guys, I'm triyng validate an input using Ajax/Jquery unobstrusive. But, after ModelState is not valid, I dont know how to treat the return of ajax call and how to show the 'required text/regular expression' on the asp-validatation-for tag. Can some one help?

On my .cshtml:

<label class="control-label">CodCard</label>
<input asp-for="CodCard" type="text" class="form-control small col-4" />
<span asp-validation-for="CodCard" class="text-danger"></span>

On my ViewModel:

[Required(ErrorMessage = "{0} must not be empty.")]
[Display(Name = "Code card")]
[StringLength(4, MinimumLength = 3, ErrorMessage = "Must be between {2} and {1} characters.")]
[RegularExpression("^[0-9]*$", ErrorMessage = "Must have only numbers.")]
public string CodCard { get; set; }

On my .js:

    $(function () {
        $("#btnChk").click('show.bs.modal', function () {
            var options = {};
            options.type = "POST";
            options.url = "/api/CheckOut";
            options.dataType = "JSON";
            options.cache = false;
            options.async = true;
            contentType = "application/json; charset=utf-8",
            options.data = {
                "IdOrder": $("#IdOrder").val(),
                "CodCard": $("#CodCard").val()
            };

            options.beforeSend = function (xhr) { xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
            };
        
            options.success = function (data) {
            if (!data.success) {
                if (data.errors.length > 0) {
                    
                    
                    // I supposed to do something here, I am right?? But How? 

                    //for (var i = 0; i < response.errors.length; i++) {
                    //    var error = response.errors[i];
                    //    alert(error);
                    //}

                }
            }
            else
            {
                if (data.IdOrder!= null) {
                    window.location.href = "/app/order/order?Id=" + data.IdOrder;
                }

                // Error 
                if (data.errors == "fail") {
                    var modal = $("#itemLoader");
                    modal.find('.modal-body .spinner-border').hide();
                    modal.find('.modal-body .far').show();
                }
            }
        };
        options.error = function () {
            $('.alertMsg').html("Error while making Ajax call!");
        };
        $.ajax(options);
    });
});

My controller class:

     [HttpPost("/api/CheckOut")]
     public async Task<IActionResult> CheckOut([Bind("IdOrder, CodCard")] BagCheckOutViewModel checkOut)
     {
           ...
    
        if (!ModelState.IsValid)
        {   
                  return Json(new { success = false, errors = ModelState.Values.Where(i => i.Errors.Count > 0) });
        }

          ...

Answer 1

Here is a working demo about how to display the modelstate error after ajax post back:

View(Privacy.cshtml):

@model BagCheckOutViewModel 
<div id="myform">
    <form>
        <div>
            <label class="control-label">CodCard</label>
            <input asp-for="CodCard" type="text" class="form-control small col-4" />
            <span asp-validation-for="CodCard" class="text-danger"></span>
        </div>
        <div>
            <label class="control-label">IdOrder</label>
            <input asp-for="IdOrder" type="text" class="form-control small col-4" />
            <span asp-validation-for="IdOrder" class="text-danger"></span>
        </div>
        <div>
            <input type="button" id="btnChk" value="click" />
        </div>
    </form>
</div>

Scripts:

@section Scripts
{
    <script type="text/javascript">
          $(function () {
            $("#btnChk").click('show.bs.modal', function () {
                var options = {};
                options.type = "POST";
                options.url = "/api/CheckOut";
                options.dataType = "JSON";
                options.cache = false;
                options.async = true;
                contentType = "application/json; charset=utf-8",
                options.data = {
                    "IdOrder": $("#IdOrder").val(),
                    "CodCard": $("#CodCard").val()
                };

                options.beforeSend = function (xhr) { xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
                };

                options.success = function (data) {
                    //do your stuff...
            
            };
                options.error = function (res) {
                    $('#myform').html(res.responseText); //change here...
            };
            $.ajax(options);
        });
    });
    </script>
}

Controller:

[HttpPost("/api/CheckOut")]
public async Task<IActionResult> CheckOut([Bind("IdOrder, CodCard")] BagCheckOutViewModel checkOut)
{

    if (!ModelState.IsValid)
    {
        return PartialView("Privacy",checkOut);
    }
    return Json(new { success = true});
}

Result: