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

时间:2010-09-20 07:38:58

标签: jquery validation

我一直在考虑如何将验证消息显示在表单的不同部分。我有一个单一的html形式的在线报价。我已将它们放入不同的部分,以方便用户根据类别输入信息。

我已将表格分为例如客户联系详情,顾问详情,客户信用卡明细,机票部分。请注意,实际表格并不像这个简单。 我想在这个表单上进行jQuery验证。问题是我想根据其类别分离验证消息。我不想将验证消息混合成一个。这会使顾问感到困惑,因为这种形式是一种完全动态的形式,它可以包含100多个字段,仅用于单一报价。

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

然而,它与Air Ticket Sections不同,Air Ticket Sections将大量信息放在表格中。使用表格格式,验证消息不能显示在字段旁边。所以,我正在考虑使用jQuery errorLableContainer来显示消息。

此时,我只能想到使用不同的html表单。但是,我不想这样做。我想用单个html表单保留它。或者,我可以使用jQuery组,我还没有完成测试以使用jQuery组。

任何人都有更好的想法来解决此验证消息?任何想法将不胜感激。我相信,那里的人也有同样的问题。

谢谢。

1 个答案:

答案 0 :(得分:0)

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表示法做一些奇怪的事情)。

相关问题