Question

有人试过点击按钮时使用bootstrap模态表单尝试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中的代码不匹配：

<强> OP ：

jQuery：User_ID和First_Name
HTML：未显示

<强>的jsfiddle ：

jQuery：firstname和lastname
HTML：username和password

在jsFiddle中，您的规则在firstname和lastname上声明，而您的实际字段则命名为username和password。字段的name属性必须与rules的{{1}}对象中使用的名称完全对应。
查看JavaScript控制台，我看到“。validate不是函数”消息。注意jsFiddle的警告消息，如果在添加外部资源时不使用.validate() URL，则无法使用。我将jQuery Validate插件切换为secure CDN link。
您不需要为Bootstrap包含两个CSS文件。缩小版本具有与未缩小版本相同的CSS规则/属性。删除一个。

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

jquery使用bootstrap模式验证插件

1 个答案: