Мастер Fuelux и formvalidation.io - ajax

Question

У меня в настоящее время возникают проблемы с получением ajax submit работы с этими двумя плагинами, кто-нибудь знает, как это должно выглядеть? Поскольку на данный момент он передает без части ajax самому себе - тот же адрес, что и исполнение. Я получил действительно не знаю, где Аякса часть должна быть и то, что будет вызывать formvalidation.io представить обработчик - так как я предполагаю, что он должен быть вызван из на («») success.form.fv

Formvalidation.io часть

$('#orderForm').find('input[name="radioclient"]') 
       .on('ifChanged', function(e) { 
       // some conditionall validation 
       }) 
       .end() 
      .formValidation({ 
       ... options ... 
      }).on('success.form.fv', function(e) { 
       // Prevent form submission 
       e.preventDefault(); 

       var $form = $(e.target), 
        fv = $form.data('formValidation'); 
      console.log('called'); 


      }); 

Fuelux часть

$('#orderWizard') 
     // Call the wizard plugin 
     .wizard() 

     // Triggered when clicking the Next/Prev buttons 
     .on('actionclicked.fu.wizard', function(e, data) { 
      var fv   = $('#orderForm').data('formValidation'), // FormValidation instance 
       step  = data.step,        // Current step 
       // The current step container 
       $container = $('#orderForm').find('.step-pane[data-step="' + step +'"]'); 

      // Validate the container 
      fv.validateContainer($container); 

      var isValidStep = fv.isValidContainer($container); 
      if (isValidStep === false || isValidStep === null) { 
       // Do not jump to the target panel 
       console.log(isValidStep); 
       console.log(data); 
       e.preventDefault(); 
      } 
     }) 

     // Triggered when clicking the Complete button 
     .on('finished.fu.wizard', function(e) { 
      var fv   = $('#orderForm').data('formValidation'), 
       step  = $('#orderWizard').wizard('selectedItem').step, 
       $container = $('#orderForm').find('.step-pane[data-step="' + step +'"]'); 

      // Validate the last step container 
      fv.validateContainer($container); 

      var isValidStep = fv.isValidContainer($container); 
      if (isValidStep === true) { 
       // Uncomment the following line to submit the form using the defaultSubmit() method 
       fv.defaultSubmit(); 
     // Use Ajax to submit form data 
      // $("#loadersp").html('<center><img src="<?PHP echo base_url();?>assets/images/load.gif" alt="Czekaj" /></center>'); 
    // $.ajax({ 
      // type: "POST", 
      // url: "<?php echo site_url('Zlecenia/dodaj_zgloszenie'); ?>", 
      // data: new FormData(this), 
      // dataType: 'json', 
      // cache: false, 
     // }).success(function(response) { 
       // If there is error returned from server 
       // if (response.result === 'error') { 
        // $("#ajax_r").html('<div class="col-md-12"><div class="note note-danger"><h4 class="box-heading">Niepowodzenie</h4><p>'+response.msg+'</p></div></div>'); 
        // $("html, body").animate({ scrollTop: 0 }, "slow"); 
       // } else { 

        // $("#ajax_r").html('<div class="col-md-12"><div class="note note-success"><h4 class="box-heading">Powodzenie</h4><p>'+response+'</p></div></div>'); 
        // $("html, body").animate({ scrollTop: 0 }, "slow"); 
        // $('#nowyKlient').formValidation('resetForm', true); 
        // $("#nowyKlient").trigger('reset'); 
       // } 
       // }); 

      e.preventDefault(); 
       // For testing purpose 
       // $('#thankModal').modal(); 
      } 
     }); 

Answer 1

Ваш вопрос был Dwarf Fortress уровня FUN. И несмотря на это (или из-за этого?), Было приятно поиграть.

Чтобы ответить на ваш вопрос, я использовал эти части документации:

http://getfuelux.com/javascript.html#wizard-usage-methods - Я .wizard ('следующий') здесь

http://formvalidation.io/examples/ajax-submit/ - Я вижу, что вы нашли эту страницу тоже. Я рассмотрел предложенные способы сделать работу Ajax для FormValidation и почему она щекочет

http://formvalidation.io/api/#default-submit - после многих часов FUN я нашел это в документации. В основном - что говорит - .defaultSubmit - это no-no для Ajax - он используется для отправки данных обычным способом.

http://formvalidation.io/examples/fuel-ux-wizard/ - Я вижу, что вы нашли эту страницу тоже. Я использовал эту базу кода для создания проверяемой среды. Разметка HTML применима, поскольку она приведена в этом примере, но отправка данных по мере того, как Ajax отличается от отправки данных как обычный HTTP-запрос: нам нужно будет изменить сценарий.

Почему код, который вы использовали, не работает должным образом? Проблема Fuel UX - это перемещение между шагами. Он не знает о формах, он не меняет поведение формы, не добавляет события формы или события. Единственное, что он волнует - это кнопка prev-next и нажатие последней кнопки. И это все. Внимание FormValidation - это формы, но это мягко влияет на них: если он видит, что вход недействителен, он блокирует отправку события. Если вход действителен - он позволяет отправить событие для проскальзывания. Куда отправляется это событие? По умолчанию обработчик формы. Теперь, когда вы понимаете их проблемы и движение событий, вы можете видеть систему, которая позволит объединить Fuel UX, FormValidation и Ajax.

Ниже приведен рабочий код, который решает вашу проблему. Вы можете скопировать и протестировать локально - это почти автономная версия. Единственное, что вам нужно - это устойчивое подключение к Интернету - он использует CSS и JS из разных CND и отправляет запрос Ajax на stackoverflow.com (вы можете изменить это, использовать любой сайт - но он не будет работать, если вы используете URL из файл: /// на локальной машине)

<!DOCTYPE html> 
<html> 
    <head> 

     <title>Test - teaching FormValidation, Fuel FX and AJAX play together</title> 

     <!-- Styles - Bootstrap, FormValidation, Fuel UX --> 
     <link rel="stylesheet" href="http://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css"> 
     <link rel="stylesheet" href="http://www.fuelcdn.com/fuelux/3.4.0/css/fuelux.min.css"> 

     <!-- Scripts - jQuery, Bootstrap, FormValidation, Fuel UX --> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <script src="http://cdn.jsdelivr.net/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
     <script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script> 
     <script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script> 
     <script src="http://www.fuelcdn.com/fuelux/3.4.0/js/fuelux.min.js"></script> 

    </head> 

    <body> 

     <h1>Hello, world!</h1> 

     <div class="fuelux"> 
      <div class="wizard" id="orderWizard"> 
       <ul class="steps"> 
        <li data-step="1" class="active"><span class="badge">1</span> Your first step<span class="chevron"></span></li> 
        <li data-step="2"><span class="badge">2</span> Your second step<span class="chevron"></span></li> 
       </ul> 

       <div class="actions"> 
        <button type="button" class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button> 
        <button type="button" class="btn btn-default btn-next" data-last="Order">Next<span class="glyphicon glyphicon-arrow-right"></span></button> 
       </div> 

       <form id="orderForm" method="post" class="form-horizontal" action="http://stackoverflow.com"> 

        <div class="step-content"> 
         <!-- The first panel --> 
         <div class="step-pane active" data-step="1"> 
          <div class="form-group"> 
           <label class="col-xs-3 control-label">Text-1</label> 
           <div class="col-xs-3"> 
            <input type="text" class="form-control" name="textA" /> 
           </div> 
          </div> 
         </div> 

         <!-- The second panel --> 
         <div class="step-pane" data-step="2"> 
          <div class="form-group"> 
           <label class="col-xs-3 control-label">Text-2</label> 
           <div class="col-xs-3"> 
            <input type="text" class="form-control" name="textB" /> 
           </div> 
          </div> 
         </div> 
        </div> 

       </form> 

      </div> 
     </div> 

     <script> 

     $(document).ready(function() { 
      $('#orderForm').formValidation({ 
       framework: 'bootstrap', 
       icon: { 
        valid: 'glyphicon glyphicon-ok', 
        invalid: 'glyphicon glyphicon-remove', 
        validating: 'glyphicon glyphicon-refresh' 
       }, 
       // This option will not ignore invisible fields which belong to inactive panels 
       excluded: ':disabled', 
       fields: { 
        textA: { 
         validators: { 
          notEmpty: { 
           message: 'The textA is required' 
          }, 
          regexp: { 
           regexp: /^[a-zA-Z\s]+$/, 
           message: 'The textA can only consist of alphabetical and space' 
          } 
         } 
        }, 
        textB: { 
         validators: { 
          notEmpty: { 
           message: 'The textB is required' 
          }, 
          regexp: { 
           regexp: /^[a-zA-Z\s]+$/, 
           message: 'The textB can only consist of alphabetical and space' 
          } 
         } 
        } 
       } 
      }) 
      .on('submit', function() { 

       // make your form play with Fuel UX 
       $('#orderWizard').wizard('next'); 
      }) 
      .on('success.form.fv', function(e) { 
       // Prevent form submission 
       e.preventDefault(); 
      }); 

      $('#orderWizard') 
       // Call the wizard plugin 
       .wizard() 

       // Triggered when clicking the Next/Prev buttons 
       .on('actionclicked.fu.wizard', function(e, data) { 
        var fv   = $('#orderForm').data('formValidation'), // FormValidation instance 
         step  = data.step,        // Current step 
         // The current step container 
         $container = $('#orderForm').find('.step-pane[data-step="' + step +'"]'); 

        if (data.direction === 'previous') { 
         // Do nothing if you're going to the previous step 
         return; 
        } 

        // Validate the container 
        fv.validateContainer($container); 

        var isValidStep = fv.isValidContainer($container); 
        if (isValidStep === false || isValidStep === null) { 
         // Do not jump to the target panel 
         e.preventDefault(); 
        } 
       }) 

       // Triggered when clicking the Complete button 
       .on('finished.fu.wizard', function(e) { 
        var fv   = $('#orderForm').data('formValidation'), 
         step  = $('#orderWizard').wizard('selectedItem').step, 
         $container = $('#orderForm').find('.step-pane[data-step="' + step +'"]'); 

        // Validate the last step container 
        fv.validateContainer($container); 

        var isValidStep = fv.isValidContainer($container); 
        if (isValidStep === true) { 

         // your Fuel UX wizard mustn't fire 
         // fv.defaultSubmit(); - because what it means 
         // is trigger raw form.submit() - 
         // this function it is designed 
         // to send form in a normal way - no validation, 
         // just a standard 'post' or 'get' 
         // 
         // but you want ajax - so that means that 
         // normal submit is a no-no for you      

         var $form = $('#orderForm'); 

         // For testing purpose 
         alert('We started to send your Ajax request'); 

         // Use Ajax to submit form data 
         $.ajax({ 
          url: $form.attr('action'), 
          type: 'POST', 
          data: $form.serialize(), 
          success: function(result) { 
           // ... Process the result ... 
           // For testing purpose 
           alert('Your Ajax request was successful!'); 
          }, 
          error: function(result) { 
           // ... Process the result ... 
           // For testing purpose 
           alert('Unfortunately your Ajax request failed'); 
          } 
         }); 
        } 
       }); 
     }); 


     </script> 

    </body> 

</html>