使用Jquery步驟嚮導進行不顯眼的驗證

Question

最近，我問了一個關於如何自定義JQuery步驟的問題，因爲我想使用部分視圖而不是靜態內容。我已經部分通過使用jQuery的步驟支持下面的代碼解決了這個問題，

<h3>Step 1</h3> 
     <section data-mode="async" data-url="/Formation/RenderStep1"></section> 

    <h3>Step 2</h3> 
     <section data-mode="async" data-url="/Formation/RenderStep2"></section> 

現在我面對現在的大問題是如何使用不引人注目的驗證。我不想使用JQuery自定義驗證，並且必須有一些使用Obtrusive的方法。

呈現的每個局部視圖都有其自己的形式。我要驗證的形式在jQuery的步驟onStepChanging功能，

$("#my-steps").steps({ 
     headerTag: "h3", 
     bodyTag: "section", 
     contentMode: "async", 
     transitionEffect: "fade", 
     stepsOrientation: "vertical", 

     onStepChanging: function (event, currentIndex, newIndex) {    
      return true; 
     } 
    }); 

我試圖調用$ .validator.unobtrusvie.parse（ '＃myForm的'）;在onStepChanging函數中，（'#myform'）是未定義的，我仍然不知道這是否是手動調用不顯眼驗證的正確方法。請引導我並告訴我實現這一目標的方向。任何幫助將不勝感激。

Answer 1

這聽起來像你試圖管理JQuery步驟庫中的多種形式，我不認爲這是它的目的。

當您配置JQuery步驟時，將其設置爲針對視圖中的表單。

不顯眼的JQuery驗證正在查看您的視圖中的模型，並自動配置HTML與相關的數據屬性進行錯誤處理。

此驗證應該在客戶端自動觸發。

只要在相同的表單元素中封裝了部分視圖，就不應該出現問題。

要求將每個局部視圖以自己的形式包裹起來的要求是什麼？如果您試圖在整個JQuery步驟表單嚮導中創建多個帖子，則可以擊敗該對象。

在JQuery的步驟形式的每一步，你僅在驗證一種形式是這樣的： -

onStepChanging: function (event, currentIndex, newIndex) { 

        //Allways allow user to move backwards. 

        if (currentIndex > newIndex) { 
         return true; 
        } 

        // Remove the validation errors from the next step, incase user has previously visited it. 

        var form = $(this); 

        if (currentIndex < newIndex) { 

         // remove error styles 
         $(".body:eq(" + newIndex + ") label.error", form).remove(); 
         $(".body:eq(" + newIndex + ") .error", form).removeClass("error"); 
        } 

        //disable validation on fields that are disabled or hidden. 

        form.validate().settings.ignore = ":disabled,:hidden"; 

        return form.valid(); 
       } 

一旦用戶完成數據輸入，以及客戶端驗證已經滿足了，你鉤到該onFinished方法和發佈形式： -

onFinished: function (event, currentIndex) { 

        var form = $(this); 
        form.submit(); 
       } 

JQuery的步驟的目的是爲了讓用戶有填寫表格的流暢的體驗，並不會被問的問題數量所淹沒。

從開發人員的角度來看，它使我們能夠將表單拆分爲尺寸不錯的塊，而不必擔心在屏幕之間保存進度或丟失表單數據的狀態，並且允許我們捕獲所有需要的數據只要滿足所有驗證標準，就只需製作一個帖子即可。

Answer 2

我試過formvalidation插件，它會放鬆你的思維，從沒有窗體標記或驗證的驗證中搜索，而不會提交表單，這是我在嘗試時解決的問題。

我知道這是不是免費的，但你可以從here試試吧，我個人喜歡後驗證

首先更新高度

<style type="text/css"> 
    /* Adjust the height of section */ 
    #profileForm .content { 
     min-height: 100px; 
    } 
    #profileForm .content > .body { 
     width: 100%; 
     height: auto; 
     padding: 15px; 
     position: relative; 
    } 

二，添加data-steps指數的部分*

<form id="profileForm" method="post" class="form-horizontal"> 
    <h2>Account</h2> 
    <section data-step="0"> 
    <div class="form-group"> 
     <label class="col-xs-3 control-label">Username</label> 
     <div class="col-xs-5"> 
      <input type="text" class="form-control" name="username" /> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-xs-3 control-label">Email</label> 
     <div class="col-xs-5"> 
      <input type="text" class="form-control" name="email" /> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-xs-3 control-label">Password</label> 
     <div class="col-xs-5"> 
      <input type="password" class="form-control" name="password" /> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-xs-3 control-label">Retype password</label> 
     <div class="col-xs-5"> 
      <input type="password" class="form-control" name="confirmPassword" /> 
     </div> 
    </div> 
</section> 

三，碎花cript code

<script> 
## // to adjust step height to fit frame after showing validation messages## 
$(document).ready(function() { 
    function adjustIframeHeight() { 
    var $body = $('body'), 
     $iframe = $body.data('iframe.fv'); 
    if ($iframe) { 
     // Adjust the height of iframe 
     $iframe.height($body.height()); 
    } 
} 

// IMPORTANT: You must call .steps() before calling .formValidation() 
$('#profileForm') 
    // setps setup 
    .steps({ 
     headerTag: 'h2', 
     bodyTag: 'section', 
     onStepChanged: function(e, currentIndex, priorIndex) { 
      // You don't need to care about it 
      // It is for the specific demo 
      adjustIframeHeight(); 
     }, 


     // Triggered when clicking the Previous/Next buttons 
     // to apply validation to your section 

     onStepChanging: function(e, currentIndex, newIndex) { 
      var fv   = $('#profileForm').data('formValidation'), // FormValidation instance 
       // The current step container 
       $container = $('#profileForm').find('section[data-step="' + currentIndex +'"]'); 

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

      var isValidStep = fv.isValidContainer($container); 
      if (isValidStep === false || isValidStep === null) { 
       // Do not jump to the next step 
       return false; 
      } 

      return true; 
     }, 
     // Triggered when clicking the Finish button 
     onFinishing: function(e, currentIndex) { 
      var fv   = $('#profileForm').data('formValidation'), 
       $container = $('#profileForm').find('section[data-step="' + currentIndex +'"]'); 

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

      var isValidStep = fv.isValidContainer($container); 
      if (isValidStep === false || isValidStep === null) { 
       return false; 
      } 

      return true; 
     }, 
     onFinished: function(e, currentIndex) { 
      // Uncomment the following line to submit the form using the defaultSubmit() method 
      // $('#profileForm').formValidation('defaultSubmit'); 

      // For testing purpose 
      $('#welcomeModal').modal(); 
     } 
    }) 
    .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: { 
      username: { 
       validators: { 
        notEmpty: { 

        // for asp.net i used element attribute to integerated with unobtrusive validation 
        // message :$('username').attr('data-val-required') 

         message: 'The username is required' 
        }, 
        stringLength: { 
         min: 6, 
         max: 30, 
         message: 'The username must be more than 6 and less than 30 characters long' 
        }, 
        regexp: { 
         regexp: /^[a-zA-Z0-9_\.]+$/, 
         message: 'The username can only consist of alphabetical, number, dot and underscore' 
        } 
       } 
      }, 
      email: { 
       validators: { 
        notEmpty: { 
         message: 'The email address is required' 
        }, 
        emailAddress: { 
         message: 'The input is not a valid email address' 
        } 
       } 
      }, 
      password: { 
       validators: { 
        notEmpty: { 
         message: 'The password is required' 
        }, 
        different: { 
         field: 'username', 
         message: 'The password cannot be the same as username' 
        } 
       } 
      }, 
      confirmPassword: { 
       validators: { 
        notEmpty: { 
         message: 'The confirm password is required' 
        }, 
        identical: { 
         field: 'password', 
         message: 'The confirm password must be the same as original one' 
        } 
       } 
      } 
      } 
    });