使用多部分表单进行内联验证

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格式,只需要简明扼要的问题.有关更多发布指导,请参阅StackOverflow问题清单和sscce.org.

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

当我创建多步骤表单时,我<form>为每个部分使用一组唯一的标记.然后我使用该.valid()方法测试该部分,然后再移动到下一部分. (不要忘记首先初始化插件; .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只在最后一种形式上利用插件的内置回调函数.

"概念证明"演示:http: //jsfiddle.net/dNPFX/

另外,请参阅:

/sf/answers/1368268891/

引用OP:

" 我想指定我想要验证的字段,创建规则并根据它们是否是错误来指定我想在类中放置错误的位置.我正在使用Blueprint CSS框架,它已经为这样构建了类事情,但正如我所说,我无法弄清楚如何做到这一点."

同样,这不是非常具体.您是在谈论使用class设置规则还是使用自定义class来指定错误？你有什么尝试？jQuery Validate插件允许您以多种不同方式指定规则,包括class.

如果您参考文档,您可以看到有一些被调用的选项validClass,errorClass它们允许您指定class字段在有效或无效时使用的不同名称.