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

我的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');
  }
});

解决方法:

您可以使用.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