如果表單通過驗證則得到確認

Question

我有一個帶有 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>

我想要 1-首先通過 jquery 客戶端評估插件檢查表單驗證 2- 如果驗證通過，則獲得用戶發送數據的確認

3- 然后提交 4- 如果不是屏幕上顯示的數據注釋

我有選項 2 和 3 的 jquery 代碼

 $("#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();
            }                
        })
    }); 

在這種情況下，即使是名稱輸入字段（表單驗證應該為負），確認也會發送給用戶

我怎樣才能做到這一點？

Answer 1

為此，您需要安裝名為[jquery validation]的自定義 jquery package 。 這是怎么做的：

$("#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();
                }                
            })
       }
 });