Проверка формы JQuery не работает во время отправки ajax

Question

У меня есть форма с двумя полями, которые я пытаюсь отправить с помощью ajax. У меня есть плагин jquery form validator, который отлично работает со всеми другими формами. Когда я пытаюсь выполнить ajax, проверка не работает. Sacript я использую:

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

Вы можете увидеть много обратных вызовов here

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 

     }); 
     } 
     }); 
    });