Fuelux嚮導和formvalidation.io - 一個ajax

Question

我目前有一些麻煩得到一個Ajax提交這兩個插件的工作，有誰知道它應該如何看？因爲現在它沒有提供ajax部分給自己 - 與執行地址相同。我真的不知道那裏的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

你的問題FUN的矮人要塞級。儘管如此（或者因爲這個原因？），玩起來很愉快。

要回答你的問題，我用文件的這些部分：

http://getfuelux.com/javascript.html#wizard-usage-methods - 我用.wizard（ '下一步'），從這裏

http://formvalidation.io/examples/ajax-submit/ - 我看你發現頁面了。我審查了爲Ajax工作FormValidation提出的方法，以及爲什麼它發癢了幾個小時後，我在文檔中找到了這個東西。基本上 - 說什麼 - .defaultSubmit是Ajax的不可否認 - 它用於以傳統方式提交數據。

http://formvalidation.io/examples/fuel-ux-wizard/ - 我看到你也找到了那個頁面。我使用這個代碼庫來產生一個可測試的環境。 HTML標記是可用的，因爲它在該示例中給出，但以Ajax方式發送數據與以普通HTTP請求方式發送數據不同：我們需要更改腳本。

爲什麼您使用的代碼無法正常工作？燃料用戶體驗的擔憂 - 是關於在各個步驟之間移動它不知道表單它不改變表單的行爲，它不會添加表單事件或事件。只關心它 - 是上一個按鈕並點擊最後一個按鈕。就這樣。 FormValidation的擔心 - 是表單 - 但它影響他們，輕輕地：如果它可以看到輸入無效，它會阻止提交事件。如果輸入有效 - 它允許提交事件打滑。提交事件在哪裏滑到？到表單的默認處理程序。現在，當你理解他們的擔憂和事件的移動時，你可以看到將使Fuel UX，FormValidation和Ajax一起玩的系統。

下面，我提出一個解決您的問題的工作代碼。您可以複製它並在本地進行測試 - 它幾乎是獨立版本。唯一需要的是 - 穩定的互聯網連接 - 它使用來自不同CND的CSS和JS，並將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>