jquery 使用 bootstrap 模态验证插件

Question

有没有人尝试过 jquery 通过单击按钮使用 bootstrap 模态形式验证插件。我在单击按钮时执行以下代码，但它不起作用。任何帮助将不胜感激。我的代码也可以看看https://jsfiddle.net/dharmjit/unr17s9u/2/

$('#addForm').validate({
      rules: {
        User_ID: {
          required: true,
          minlength: 2,
          maxlength: 10,
          messages: {
            required: "Required input",
            minlength: jQuery.validator
              .format("Please, at least {0} characters are necessary"),
            maxlength: jQuery.validator
              .format("Please, at least {0} characters are necessary")
          }
        },
        First_Name: {
          required: true,
          minlength: 2,
          maxlength: 10,
          messages: {
            required: "Required input",
            minlength: jQuery.validator
              .format("Please, at least {0} characters are necessary"),
            maxlength: jQuery.validator
              .format("Please, at least {0} characters are necessary")
          },
          highlight: function(element) {
            $(element)
              .closest('.form-group')
              .removeClass('success')
              .addClass('error');
          },
          success: function(element) {
            element.text('OK!').addClass(
                'valid').closest(
                '.form-group')
              .removeClass('error')
              .addClass('success');
          }
        });

Answer 1

查看 your jsFiddle，它与您的 OP 中的代码不匹配：

OP:

jQuery：User_ID 和 First_Name
HTML: 未显示

jsFiddle:

jQuery：firstname 和 lastname
HTML：username 和 password

在 jsFiddle 中，您的规则在 firstname 和 lastname 上声明，而您的实际字段名为 username 和 password。字段的 name 属性必须与 .validate() 的 rules 对象中使用的名称完全对应。
查看 JavaScript 控制台，我看到 ".validate is not a function" 消息。注意jsFiddle的警告信息，如果你在添加外部资源时不使用https URL，它将不起作用。我将 jQuery 验证插件切换为其 secure CDN link.
您不需要为 Bootstrap 添加两个 CSS 文件。缩小版与未缩小版具有相同的 CSS rules/properties。删除一个。

否则，您发布的代码完全按设计工作：https://jsfiddle.net/unr17s9u/4/

jquery 使用 bootstrap 模态验证插件

jquery validate plugin with bootstrap modal

jquery

jquery-validate

bootstrap-modal

twitter-bootstrap-3