Validacja formularza po jego wysłaniu za pomocą ajaxa

Question

Problem polega na tym , że jeżeli nie używam ajaxa to validacja po stronie klienta działa i formularz nie zostaje wysłany kiedy dołączam kod js to niestety zawsze wysyła próbowałem różnych funkcji valid() zawsze zwraca true itp zwracania widoku json niestety wtedy zwraca albo cały widok w miejscu gdzie normalnie jest partialview albo przy json nic nie pojawiają się komunikaty o błędach

 public IActionResult ChoosePlace()
        {
            SelectPlaceViewModel model = new SelectPlaceViewModel();
            return View("ChoosePlace",model);
        }



       

        public IActionResult ShowPlaces(SelectPlaceViewModel model)
        {

            if (ModelState.IsValid)
            {
                List<Place> PlacesList = repository.SelectPlaces(model);

                return PartialView(PlacesList);
            }
            else
            {
                List<Place> PlacesList = new List<Place>();
               
               
                return View("ChoosePlace",model);
            }

        }





a tu widok 


@model SelectPlaceViewModel

@{
    ViewData["Title"] = "ChoosePlace";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



<div class="container">
    <div class="row text-center">
        <div class="col-lg-12">
            <h2>Wybierz Miejsce Wizyty</h2>
        </div>
    </div>

    <div>@DateTime.Now</div>

    <div class="row">
        <div class="col-lg-12">
          
            <form id="SelectPlace" asp-action="ShowPlaces" asp-controller="Appointment">
                <div class="row">
                    <div class="col-lg-4 form-group ">
                        <div><span asp-validation-for="Country" class="text-danger"></span></div>
                        <lable>Kraj</lable>
                        <input name="Country" class="form-control">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 form-group ">
                        <div><span asp-validation-for="City" class="text-danger"></span></div>
                        <lable>Miasto</lable>
                        <input name="City" class="form-control">
                    </div>
                </div><div class="row">
                    <div class="col-lg-4 form-group ">
                        <div><span asp-validation-for="Street" class="text-danger"></span></div>
                        <lable>Ulica</lable>
                        <input asp-for="Street" class="form-control">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 form-group ">
                        <div><span asp-validation-for="BuildingNumber" class="text-danger"></span></div>
                        <lable>Numer Budynku</lable>
                        <input asp-for="BuildingNumber" class="form-control">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 form-group ">
                        <div><span asp-validation-for="Room" class="text-danger"></span></div>
                        <lable>Pokój</lable>
                        <input asp-for="Room" class="form-control">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 form-group ">
                        <button type="submit" id="Search">Szukaj</button>
                    </div>
                </div>

            </form>

            <div class="row">
                <div class="col-lg-4 form-group ">
                    <a class="btn btn-primary" asp-action="AddPlace">Dodaj Miejsce</a>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div id="SelectResult" class="col-lg-12">
            <h2>Brak Wyników</h2>
        </div>
    </div>
</div>









@section Scripts
    {





<script type="text/javascript">

  
   

           var frm = $('#SelectPlace');

           $("#SelectPlace").validate({
               submitHandler: function (form) { // fires only when form is valid
                   // your ajax here

                   alert("Works");
                   $.ajax({
                       type: frm.attr('method'),
                       url: frm.attr('action'),
                       data: frm.serialize(),
                       success: function (data) {
                           //$.validator.unobtrusive.parse("#SelectPlace");
                           $("#SelectResult").html(data);
                           alert("Submit");
                       },
                       error: function (data) {
                           console.log('An error occurred.');
                           console.log(data);
                           alert("Error");
                       },
                   });
                   return false;
               }
    });

   
        </script>



widok częściowy zwracany po poprawnym wysłaniu formularza który działa


@model List<Place>

    
@{
   
}


<div class="row">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Nazwa</th>
                <th>Kraj</th>
                <th>Miasto</th>
                <th>Ulica</th>
                <th>Nr Budynku</th>
                <th>Pokój</th>
                <th></th>
            </tr>
        </thead>
        <tbody>



            @foreach (var place in Model)
            {
                <tr>
                    <td>@place.PlaceName</td>
                    <td>@place.Country</td>
                    <td>@place.City</td>
                    <td>@place.Street</td>
                    <td>@place.BuildingNumber</td>
                    <td>@place.Room</td> 
                    <td><a class="btn btn-primary" asp-action="AddAppointment" asp-route-id="@place.PlaceId">Wybierz</a></td>
                </tr>
            }
        </tbody>

    </table>




</div>

 

Answer 1

Nie jestem programistą .net, ale może dopytam i rozwieję wątpliwości:

Ten Javascript z funkcją valid() jest ładowany automatycznie przy ładowaniu strony, czy w momencie naciśnięcia buttona do wysłania danych formularza?