使用表單嚮導插件進行jQuery驗證工作？

我正在使用jquery驗證插件以及另一個我發現創建一種表單嚮導。我遇到的問題是讓驗證插件觸發表單嚮導的下一個按鈕，以便每個步驟進程都得到驗證，而不僅僅是在提交按鈕上。使用表單嚮導插件進行jQuery驗證工作？

JavaScript部分包括我寫的代碼的形式，也是formtowizard JS。我假設我需要編輯這部分代碼：

function createNextButton(i) { 
     var stepName = "step" + i; 
     $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next'><button class='next' type='button'>Next Step</button></a>"); 

     $("#" + stepName + "Next").bind("click", function(e) { 
      $("#" + stepName).hide(); 
      $("#step" + (i + 1)).show(); 
      if (i + 2 == count) 
       $(submmitButtonName).show(); 
      selectStep(i + 1); 
     }); 
    }

裏面的點擊功能。我只是不知道如何在這裏調用驗證觸發器

請幫忙！

來源

2013-01-02 user7954

你是不是叫'的validate（）'在你的提琴的任何地方。您需要驗證整個表單，忽略任何隱藏的內容，並且可以在每個步驟檢查表單的狀態。嘗試驗證您的表單，讓我們從那裏幫助您。 – Mathletics

好吧，我用驗證更新了小提琴，它正在進行最後一步。 http://jsfiddle.net/DHNPz/1/ – user7954

首先，你需要像

ignore: ':hidden'

講一下你的validate選項，使其僅驗證可見字段。這樣，您只能驗證每個步驟中可見的字段，並在其有效時轉到下一步。然後，您可以隨時通過運行

$('#RMAForm').validate().form()

檢查驗證，以便在有人單擊下一個按鈕時觸發驗證。你會更新你上面粘貼的代碼，如下所示：

function createNextButton(i) { 
    var stepName = "step" + i; 
    $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next'><button class='next' type='button'>Next Step</button></a>"); 

    $("#" + stepName + "Next").bind("click", function(e) { 
     // run the validation and check if the form is valid 
     if ($('#RMAForm').validate().form()) { 
      $("#" + stepName).hide(); 
      $("#step" + (i + 1)).show(); 
      if (i + 2 == count) 
       $(submmitButtonName).show(); 
      selectStep(i + 1); 
     } else { 
      return false; // prevent moving on if the form is invalid 
     } 
    }); 
}

來源

2013-01-02 20:09:51 Mathletics

完美的作品，謝謝！ :) – user7954

嗯，這是一個好主意，但我也發現了這一個。

Idee是用一個驗證選項擴展nextButton。就像這樣：

function createNextButton(i) { 
    var stepName = "step" + i; 
    $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next</a>"); 

    $("#" + stepName + "Next").bind("click", function (e) { 
     if (options.validationEnabled) { 
      var stepIsValid = true; 
      $("#" + stepName + " :input").each(function (index) { 
       checkMe = element.validate().element($(this)); 
       //stepIsValid = !element.validate().element($(this)) && stepIsValid; 
       stepIsValid = checkMe && stepIsValid; 
      }); 

      if (!stepIsValid) { 
       return false; 
      }; 
     }; 

     $("#" + stepName).hide(); 
     $("#step" + (i + 1)).show(); 
     if (i + 2 == count) 
      $(submmitButtonName).show(); 
     selectStep(i + 1, 'next'); 
    }); 
}

如此這般未來之前，它會檢查當前字段集的所有元素。來源：Validate between fieldsets

PS不要忘了啓用驗證，創建嚮導時：

$("#RMAForm").formToWizard({ 
    submitButton: 'submitMe', 
    validationEnabled: true 
});

來源

2013-01-02 20:40:29 Stefan

使用表單嚮導插件進行jQuery驗證工作？

回答

相關問題