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

Question

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

在这里,我做一个小提琴

这是验证码

$('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');
  }
});

Answer 1

您可以使用.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');
        }
    });
});

更新小提琴