get confirmation if the form is validated

Question

I have a very simple form with Tag Helper

   <form  asp-area="Admin" asp-controller="Categories" asp-action="EditCategory" method="post" id="CategoryForm">
      <div class="row">
         <div class="col-xl-4 col-lg-6 col-md-12 mb-1">
            <fieldset class="form-group">
                 <input type="hidden" id="parentId" value="@ViewBag.parentId" />
                 <input type="hidden" id="Id" asp-for="Id" />
                 <label for="basicInput">Name</label>
                 <input asp-for="Name" class="form-control" />
                 <span asp-validation-for="Name" class="text-danger"></span>
               </fieldset>
              </div>

              <div class="col-xl-12 col-lg-12 col-md-12 mb-1">
                 <fieldset class="form-group">
                     <button type="submit">Edit</button>
                 </fieldset>
               </div>
             </div>                            
         </form>

I want 1-first check the form validation by jquery client side valudation plugin 2- if it is validated then get a confirmation from user for sending the data

3- then submit it 4- if it is not the data Annotation shows on screen

I have this jquery code for option 2 and 3

 $("#CategoryForm").submit(function (event) {
        event.preventDefault();
        swal.fire({
            title: 'Edit Category',
            text: "Are you sure?",
            icon: 'info',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes',
            cancelButtonText: 'No'
        }).then((result) => {
            if (result.value) {
                $("#CategoryForm").submit();
            }                
        })
    }); 

in this case even the Name input field ( the form validation should be negative) the confirmation is sent to the user

how can I do this ?

Answer 1

to achieve this, you need to install custom jquery package called [jquery validation]. This is how to do it :

$("#CategoryForm").validate({
      submitHandler: function(form) {
            swal.fire({
                title: 'Edit Category',
                text: "Are you sure?",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.value) {
                    form.submit();
                }                
            })
       }
 });