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：

＆＃34; 这可能会变成多个问题，因为我正在通过它，但我需要一些严肃的JQuery帮助。＆＃34; < / em>的

您的发布并不适合StackOverflow格式，只需要简明扼要的问题。有关更多发布指导，请参阅the StackOverflow question checklist和sscce.org。

但是，如果您想使用jQuery Validate执行多步骤表单，则有一些不同的方法;这是我的......

当我创建多步骤表单时，我为每个部分使用一组唯一的<form>标记。然后我使用the .valid() method测试该部分，然后再移动到下一部分。 （不要忘记首先初始化插件;在DOM准备好的所有表单上调用.validate()。）

然后在最后一节，我在每个表单上使用.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回调函数。

＆＃34;概念证明＆＃34;演示：http://jsfiddle.net/dNPFX/

另外，请参阅参考：

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

引用OP：

＆＃34; 我想指定要验证的字段，创建规则并指定我希望将类错误放在哪里，具体取决于它们是否是错误。我正在使用Blueprint CSS框架，它已经为这些东西构建了类，但正如我所说，我无法弄清楚如何使这项工作。＆＃34;

同样，这不是非常具体。您是在谈论使用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个名称或不。

jQuery验证与多部分表单

1 个答案: