在不同部分中使用jQuery验证表单

Question

我一直在思考如何在表单的不同部分显示验证消息。我有一个单一的html形式的网上报价。我将它们放在不同的部分，以方便用户输入基于类别的信息。

例如，我将表单划分为客户联系方式详细信息、咨询人员详细信息、客户信用卡详细信息、机票部分。请注意，实际的表单并不像这个表单那样简单。我想在此表单上执行jQuery验证。问题是我想根据它的类别来分离验证消息。我不想将验证消息混为一谈。这会让顾问们感到困惑，因为这个表单是一个完全动态的表单，它可以包含100多个字段，只需一次引用。

因此，对于客户联系人详细信息，验证消息将仅通知用户与客户联系人详细信息相关联的任何内容。任何无效的内容，消息都将显示在关联字段的旁边。顾问详细信息和客户信用卡详细信息也是如此。

然而，它与机票部分不同，机票部分将大量信息放在一个表中。使用表格格式时，验证消息不能显示在字段旁边。因此，我正在考虑使用jQuery errorLableContainer来显示消息。

在这一点上，我只能考虑使用不同的html格式。然而，我不想这样做。我想用单一的html格式保存它。或者，我可以使用jQuery组，在这里我还没有做过使用jQuery组的测试。

谁有更好的主意来解决这个验证消息？任何想法都将不胜感激。我敢肯定，外面也有人有同样的问题。

谢谢。

Answer 1

jQuery.validate允许您指定希望每个输入字段显示的错误消息，而且由于jQuery很好地使用了CSS，因此您可以通过选择每个特定的错误消息来设置单个错误消息的样式。

您必须包含代码才能获得更具体的帮助，但这里有一个返回特定错误消息的jQuery验证示例：

$("your_form").validate({
            rules: {
                FIELD1: { required: true },
                FIELD2: { required: true },
                FIELD3: { required: true }
            },
            messages: {
                FIELD1: "Error message 1",
                FIELD2: "Error message 2",
                FIELD3: "Error message 3"
            },
            success: function(label) {
                label.addClass('valid');
            },
            error: function(submit) {
                return false;
            }

请注意，"FIELD1“、"FIELD2”等标签名称以及每个输入元素的id (我不确定此插件是按id还是按标签名称选择的，对不起)。

然后，您可以使用诸如label[for="FIELD1"].error之类的东西来选择每个错误消息来设置错误消息的样式(注意，IE7和下面的代码使用这个CSS表示法做了一些奇怪的事情)。