使用多部分表單進行內聯驗證

Question

當我按照我的方式工作時，這可能會變成多個問題，但我需要一些認真的JQuery幫助。我已經創建了基於bassistance.de示例的多部分表單。在該演示中，驗證非常簡單 - 用一個類指定必需的字段，迭代並從表單元素標題中提取錯誤消息。

我的表單比演示更復雜 - 我在這個實例中實現了驗證。例如，在演示中，錯誤就在表單元素之後。在我的情況下，我想指定我想驗證的字段，創建規則並指定我想在類中放置錯誤的位置，具體取決於它們是否錯誤。我正在使用Blueprint CSS框架，它已經有了用於這些事情的類，但正如我所說的，我無法弄清楚如何完成這項工作。

理想情況下，我希望能夠更改驗證方法在演示以及與替代一個我比較熟悉的 - 這樣的：

$("#theForm").validate({ 
    errorPlacement: function(error, element) { 
     if(element.attr("name") === "name") { 
      error.appendTo("#nameError"); 
     } 
    }, 
    groups: { 
     capacityGroup: "progMin progMax", 
    }, 
    rules: { 
     fName: "required", 
    }, 
    messages: { 
     fName: "*First Name is required", 
    } 
}); 

所以，我當然希望有人能幫助這一點。我已經在www.43rdworld.com/multitest.htm上添加了一個稍微不同的演示，其中添加了一個用於顯示錯誤消息和樣式表的div。我真的很想改變表單的驗證方式，以便它在提交之前仍然可以逐頁驗證，但讓我指定所需的字段，編寫我自己的規則和消息並指定這些消息將顯示的位置。

Answer 1

報價OP：

「這可能會變成多個問題，因爲我的工作我的方式，通過它，但我需要一些嚴重的JQuery的幫助。」

您的文章並不真正適合StackOverflow格式，其中只有簡潔和具體的問題是預期的。請參閱the StackOverflow question checklist和sscce.org瞭解更多發佈指南。然而，如果你想用jQuery Validate做一個多步驟的表單，有幾種不同的方法;這裏是我的......

---

當我創建多步驟的形式，我用了一套獨特的<form>標籤爲每個部分。然後我使用the .valid() method來測試該部分，然後再轉到下一部分。 （不要忘了先初始化插件，請與.validate()，對各種形式的DOM的準備。）

然後在最後一節，我每個窗體上使用.serialize()和它們串聯成一個數據查詢字符串是提交。

事情是這樣的......

$(document).ready(function() { 

    $('#form1').validate({ // initialize form 1 
     // rules 
    }); 

    $('#gotoStep2').on('click', function() { // go to step 2 
     if ($('#form1').valid()) { 
      // code to reveal step 2 and hide step 1 
     } 
    }); 

    $('#form2').validate({ // initialize form 2 
     // rules 
    }); 

    $('#gotoStep3').on('click', function() { // go to step 3 
     if ($('#form2').valid()) { 
      // code to reveal step 3 and hide step 2 
     } 
    }); 

    $('#form3').validate({ initialize form 3 
     // rules, 
     submitHandler: function (form) { 
      // serialize and join data for all forms 
      var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize() 
      // ajax submit 
      return false; // block regular form submit action 
     } 
    }); 

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form. 

}); 

務必記住，我上面的click處理程序不使用type="submit"按鈕。這些是常規按鈕，外部form標記或type="button"。

只有最後一個表單上的按鈕是常規的type="submit"按鈕。這是因爲我只利用插件的內置submitHandler回調函數。

「概念證明」 DEMO：http://jsfiddle.net/dNPFX/

另請參閱參考：

https://stackoverflow.com/a/19546698/594235

---

報價OP：

「我想指定我想要驗證的字段，創建規則並指定我想在類別中放置錯誤的位置，具體取決於它們是否錯誤。我使用的是藍圖的CSS框架，它已經具備了這樣的事情內置類，但正如我所說，我無法弄清楚如何使這項工作。」

再次聲明，這不是很具體。你說的是使用class設置規則或使用自定義class錯誤指示？你嘗試過什麼？The jQuery Validate plugin will allow you specify rules in many different ways including by class。

如果refer to the documentation，你可以看到，有選擇叫validClass和errorClass，這將讓你當字段有效時指定用於字段的不同class