带有引导模式的jQuery验证插件

Question

有没有人在单击按钮时尝试使用引导模式形式的 jquery validate 插件。我在单击按钮时执行以下代码，但它不起作用。任何帮助将不胜感激。我的代码也可以看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中的代码不匹配：

操作：

• jQuery: User_ID 和 First_Name
• HTML：未显示

jsFiddle：

• jQuery: firstname 和 lastname
• HTML：username 和 password

---

1. 在 jsFiddle 中，您的规则在 firstname 和 lastname 上声明，而您的实际字段名为 username 和 password。字段的name 属性必须与.validate() 的rules 对象中使用的名称完全对应。

2. 查看 JavaScript 控制台，我看到 ".validate is not a function" 消息。注意jsFiddle的警告信息，如果你在添加外部资源的时候不使用https URL，是不行的。我将 jQuery Validate 插件切换到其secure CDN link。

3. 您不需要为 Bootstrap 包含这两个 CSS 文件。缩小版与未缩小版具有相同的 CSS 规则/属性。删除一个。

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