вызов функции загрузки jquery только при успешной проверке формы

Question

Это мой первый пост здесь. Я искал ответ на это какое-то время и посмотрел несколько сообщений, чтобы попытаться понять синтаксис. К сожалению, я не смог заставить это работать.

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

<script> 
(function() {  
    var bar = $('.bar'); 
    var percent = $('.percent'); 
    var status = $('#status'); 
    $('#create_playlist').ajaxForm({ 
     uploadProgress: function(event, position, total, percentComplete) { 
      if (percentComplete == 100) { 
       status.html('Processing <img src="../images/loader.gif" />'); 
      } else { 
       status.html('Uploading...'); 
      } 
      var percentVal = percentComplete + '%'; 
      bar.width(percentVal) 
      percent.html(percentVal); 
     }, 
     complete: function(xhr) { 
      status.html('Done! <img src="../images/success.png" />'); 
      window.location.reload(true); 
    //  status.html(xhr.responseText); 
     } 
    }); 
})(); 
</script> 

Я также использую следующий сценарий и ту же страницу, чтобы проверить свою форму с помощью jquery validate plugin.

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#create_playlist").validate({ 
      rules: { 

        newfile: { 
          required: true, 
          accept: "text/plain" 
        }, 

      }, 

      errorElement: "span", 
      errorPlacement: function(error, element) { 
      error.insertAfter(element); 
      }, 


      submitHandler: function(form) { 
       form.submit(); 
      } 
    }); 
}); 
</script> 

Оба эти сценария работают хорошо независимо. Однако, если второй скрипт показывает ошибки проверки, в настоящее время он не предотвращает запуск первого скрипта.

Что я хотел бы сделать, это вызвать первый скрипт, только когда проверка во втором скрипте будет успешной. Я считаю, что вместо «form.submit() следует называть кулачный скрипт»; в следующем коде второго скрипта.

submitHandler: function(form) {    
    form.submit(); 
} 

После попыток поставить первый сценарий внутри обработчика сценария второго сценария или называют первый сценарий, как функцию, я до сих пор не увенчались успехом. Любая помощь с этим будет высоко оценена.

Answer 1

Из того, что я могу сказать, вам не хватает события return false;, чтобы предотвратить отправку формы. Вам нужно условное утверждение для проверки первых функций функции, если это так, вызовите второе, покажите сообщение и верните false.

Answer 2

По jQuery Validate documentation:

submitHandler (по умолчанию: родная отправка формы):

Тип: Function()

обратного вызова для обработки фактического смиряться, когда форма является действительной. Получает форму как единственный аргумент. Заменяет отправку по умолчанию. Право место для отправки формы через Ajax после ее подтверждения.

JQuery:

$(document).ready(function(){ 
    $("#create_playlist").validate({ 
      rules: { 
       newfile: { 
        required: true, 
        accept: "text/plain" 
       } 
      }, 
      errorElement: "span", 
      errorPlacement: function(error, element) { 
       error.insertAfter(element); 
      }, 
      submitHandler: function(form) { 
       //form.submit(); <-- remove this... it's redundant because the plugin will submit when valid 
       var bar = $('.bar'); 
       var percent = $('.percent'); 
       var status = $('#status'); 
       form.ajaxForm({ 
        // your ajaxForm code here 
       }); 
       return false; 
      } 
    }); 
});