ajax - ajax请求之前的jquery表单验证？

Question

这是一个简单的代码，用于在使用 ajax 请求提交之前调用表单验证函数

$(document).ready(function(){
    $('#errors').hide();       
    var serializedData= $("#categoryForm").serialize();
    $("#categoryForm").submit(function(){
                $.ajax({
                type:'POST', 
                url: 'actions/add-category.php', 
                data: serializedData, 
                beforeSubmit:  function(){
                        return $("#categoryForm").validate();
                    },
                success: function(response) {
                     $('#status').html(response);
                    }
                });
        return false;
       });


});

它通过验证并在验证表单之前发送 ajax 请求如果验证为真，我尝试发出请求

$(document).ready(function(){
    $('#errors').hide();       
    var serializedData= $("#categoryForm").serialize();
    $("#categoryForm").submit(function(){
        if($("#categoryForm").validate()){
                $.ajax({
                type:'POST', 
                url: 'actions/add-category.php', 
                data: serializedData, 
                success: function(response) {
                     $('#status').html(response);
                    }
                });
        }
        return false;
       });


});

但这也不起作用

Answer 1

在任何情况下都不要提交表单，请在单击提交按钮时进行检查 - 然后如果成功 - 进行提交。尝试按如下方式进行：

$("#submitButton").click(function(){
          if($("#categoryForm").validate()){
                  $.ajax({
                  type:'POST',
                   url: 'actions/add-category.php',
                   data: serializedData,
                   success: function(response) {
                       $('#status').html(response);
                       //if true: 
                       $("#categoryForm").submit();
                          }
                      });


                  }
             return false;
     });