jQuery表单验证在Ajax提交期间不起作用

Question

我有一个包含两个字段的表单，我尝试使用ajax提交。 我有jquery表单验证器插件，可以与其他所有表单一起使用。 当我尝试Ajax提交时，验证似乎不起作用。 我使用的牺牲品是：

$("#add-edit-template").click( function(event)
    {
        var x;
        x = $('.sp-preview-inner').css('backgroundColor');
        if(x)
        {
        hexc(x);
        $('#addEditTemplateForm').append("<input type='hidden' name='templateColor' value='"+ color+"' />");
        }
        $("#addEditTemplateForm").submit(function(e)
        {
            e.preventDefault();$("div#divLoading").addClass('show');    
            var postData = $("#addEditTemplateForm").serializeArray();
            var formURL = $(this).attr("action");
            $.ajax(
             {
            url : formURL,
            type: "POST",
            data : postData,
            dataType : "html",
            success:function(htmlData) 
            {
            $('#ph_widgets').replaceWith(htmlData);
            $("#templateSuccess").show();
            $("#phButtons").show();
            $('#listWidgets').dataTable({"iDisplayLength" : 25, "aaSorting": []});
            initDraggabletable("#selectedWidgetTable");
            },
            error: function( xhr, status, errorThrown ) 
            {
                console.log( "Error: " + errorThrown );
                console.log( "Status: " + status );
                console.dir( xhr );
            },
            });
            $("div#divLoading").removeClass('show'); 
            e.preventDefault(); //STOP default action
        });
    });

我需要单击功能，因为我要从div中获取一个值，这也是我所需要的。 我试图添加

 $.validate
    ({
    form : '#addEditTemplateForm'
    })

在单击之后以及在ajax调用之前，但不会阻止提交，并且验证也不能阻止提交。 我发现可以在线找到解决方案，但对我没有任何帮助。 有什么办法解决这个问题...谢谢

Answer 1

做这样的事情：

您的onclick函数：

$("#add-edit-template").click(function(event) {
  var x;
  x = $('.sp-preview-inner').css('backgroundColor');
  if (x) {
    hexc(x);
    $('#addEditTemplateForm').append("<input type='hidden' name='templateColor' value='" + color + "' />");
  }

  $("#addEditTemplateForm").submit(); // trigger submit
});

使用回调函数进行验证

$.validate({
  form : '#addEditTemplateForm',
  onSuccess : function($form) {
    // if your form is valid
    $("div#divLoading").addClass('show');
    var postData = $("#addEditTemplateForm").serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
      url: formURL,
      type: "POST",
      data: postData,
      dataType: "html",
      success: function(htmlData) {
        $('#ph_widgets').replaceWith(htmlData);
        $("#templateSuccess").show();
        $("#phButtons").show();
        $('#listWidgets').dataTable({
          "iDisplayLength": 25,
          "aaSorting": []
        });
        initDraggabletable("#selectedWidgetTable");
      },
      error: function(xhr, status, errorThrown) {
        console.log("Error: " + errorThrown);
        console.log("Status: " + status);
        console.dir(xhr);
      },
    }).always({
      $("div#divLoading").removeClass('show');
    });

    return false; // Will stop the submission of the form
  }
 })

您可以在这里看到很多回调

Answer 2

你有没有尝试过，

$("#add-edit-template").click( function()
        {
        var x;
        x = $('.sp-preview-inner').css('backgroundColor');
        if(x)
        {
        hexc(x);
        $('#addEditTemplateForm').append("<input type='hidden' name='templateColor' value='"+ color+"' />");
       }
       var isValid = false;
       var found = false;
       $("#addEditTemplateForm").on('validation', function(evt, valid) 
       {
       if(!valid)
       {
        found = false;
        console.log('found'+found);
       }
       if(found)
       {
        $("#addEditTemplateForm").submit(function(e)
        {
            $(".alert").hide();
            e.preventDefault();
            $("div#divLoading").addClass('show');   
            var postData = $("#addEditTemplateForm").serializeArray();
            var formURL = $(this).attr("action");
            $.ajax(
            {
            url : formURL,
            type: "POST",
            data : postData,
            dataType : "html",
            success:function(htmlData) 
            {
            $('#ph_widgets').replaceWith(htmlData);
            $("#templateSuccess").show();
            $("#phButtons").show();
            $('#listWidgets').dataTable({"iDisplayLength" : 25, "aaSorting": []});
            initDraggabletable("#selectedWidgetTable");
            $("div#divLoading").removeClass('show');
            },
            error: function( xhr, status, errorThrown ) 
            {
                console.log( "Error: " + errorThrown );
                console.log( "Status: " + status );
                console.dir( xhr );
            },
        });

            e.preventDefault(); //STOP default action

        });
        }
        });
    });