如何在 DIV 标签上使用 jquery 验证插件答案

【问题标题】：How to use jquery validation plugin on DIV tag如何在 DIV 标签上使用 jquery 验证插件
【发布时间】：2011-03-21 09:28:48
【问题描述】：

我有一个包含多个步骤的表单，例如 jquery 选项卡。我的目的是验证单个选项卡中的输入文本字段，然后用户才能转到下一个选项卡。在最后一个选项卡中，我想提交包含以前选项卡中的所有数据的表单。

如何在 DIV 标签上使用 jquery 验证插件，以便我可以在单个表单中拥有多个 div 标签，以及如何验证每个 div 字段上的输入文本？

谢谢

【问题讨论】：

标签： jquery validation plugins

【解决方案1】：

您可以使用自定义规则，并根据选定的选项卡将表单设置为“有效”以提交，例如：

div 1

txt名称
txtEmail

div 2

txt地址
txt其他 ...

配置如下：

var tab1Valid = false;
var tabNValid = false;

jQuery.validator.addMethod('Tab1Validator', isFirstTabValid, '*');
jQuery.validator.addMethod('Tab2Validator', isSecondTabValid, '*');
...

 $('#tabsForm').validate({
            onkeyup: false,
            submitHandler: onSaveHandler,
            rules: {
                txtName: { Tab1Validator: '' },
                txtEmail: { Tab1Validator: '' },
                txtAddress: { Tab2Validator: '' },
...
            }
        });

isFirstTabValid: function(value, element, params) {
// validate values accordign 'element' parameter
// return corresponding true/false  
    },

isSecondTabValid: function(value, element, params) {
      if (tab1Valid === false)  {
return true; // we dont need validate other fields if first tab is not valid.
}

// else validate 
    },

嗯，是这样的。随心所欲改变，主要思想在这里

【讨论】：

【解决方案2】：

您可以临时放置一个表单并单独验证 div 成功后您可以再次删除该表单。

【讨论】：