jQuery validate bootstrap插件不验证多个表单

时间:2014-04-03 06:19:49

标签: javascript jquery twitter-bootstrap validation

我的HTML页面中有两个表单。 validate函数仅处理我的HTML的第一种形式。第二种形式未经过验证。

我在这里制作Fiddle

这是验证码

$('form').validate({
  rules: {
    firstname: {
      minlength: 3,
      maxlength: 15,
      required: true
    },
    lastname: {
      minlength: 3,
      maxlength: 15,
      required: true
    }
  },
  highlight: function(element) {
    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
  },
  unhighlight: function(element) {
    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
  }
});

1 个答案:

答案 0 :(得分:5)

您可以使用 .each() 循环浏览所有<form>并使用$(this)定位当前经过验证的表单:

$('form').each(function () {
    $(this).validate({
        rules: {
            firstname: {
                minlength: 3,
                maxlength: 15,
                required: true
            },
            lastname: {
                minlength: 3,
                maxlength: 15,
                required: true
            }
        },
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    });
});

<强> Updated Fiddle