jQuery UI 和 jQuery 验证冲突答案

【问题标题】：jQuery UI and jQuery Validation conflictjQuery UI 和 jQuery 验证冲突
【发布时间】：2014-10-30 19:17:32
【问题描述】：

我有一个简单的 .jsp 页面，它使用了更多的 JavaScript 库。页面上有一个带有输入字段的表单。我想为此输入字段使用验证插件，并且我使用了this 教程，因为我使用的是 Bootstrap 2.3.2。

test.jsp

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" media="all" />
        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jQuery.validate/1.11.1/jquery.validate.js" type="text/javascript"></script>
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

        <script type="text/javascript" src="scripts/jquery-ui-1.9.2.js"></script> 

        <style>
      form { padding: 10px; padding-top: 45px;}
      .error { border: 1px solid #b94a48!important; background-color: #fee!important; }
    </style>

        <title>JSP Page</title>

    </head>

    <body>
            <form method="post" action="./Servlet" name="filter">
    <div class="input-append date" id="dateFromFilter">        
                              <input class="span2" size="16" type="text" name="dateFromFilter"
                                     data-msg-date="Set date." data-rule-date="true" data-rule-required="true" />
                        <span class="add-on"><i class="icon-th"></i></span>
                      </div>

                <script type="text/javascript">
                        $("#dateFromFilter").attr("data-date-format", "dd/mm/yyyy");
                        $("#dateFromFilter").attr("data-date", "1/1/2014");
                        $("#dateFromFilter .span2").attr("value", "1/1/2014");
                        $('#dateFromFilter').datepicker();
                      </script>

    <div class="row">
    <button type="submit">Validate</button>
    </div>

                </form>

    <script type="text/javascript">

    $("form").validate({

      showErrors: function(errorMap, errorList) {

          // Clean up any tooltips for valid elements
          $.each(this.validElements(), function (index, element) {
              var $element = $(element);

              $element.data("title", "") // Clear the title - there is no error associated anymore
                  .removeClass("error")
                  .tooltip("destroy");
          });

          // Create new tooltips for invalid elements
          $.each(errorList, function (index, error) {
              var $element = $(error.element);

              $element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
                  .data("title", error.message)
                  .addClass("error")
                  .tooltip(); // Create a new tooltip based on the error messsage we just set in the title
          });
      },

      submitHandler: function(form) {
          alert("This is a valid form!");
      }
  });

        </script>

    </body>

问题在于行：

<script type="text/javascript" src="scripts/jquery-ui-1.9.2.js"></script>

如果我删除此库的路径，则需要进行验证。如果我导入这个库，验证不起作用，我需要这个库用于其他组件。

【问题讨论】：

准确解释“不起作用”的含义，因为使用 jQuery Validate 和 jQuery UI 没有已知问题。
@Sparky "不起作用" 我的意思是页面提交时输入值无效。如果jquery ui的路径被删除，则表单不会提交。
请为此问题创建一个 jsFiddle 演示。
@Sparky 我想并且在发布此答案之前已经尝试过，但是 jsFiddle 不支持发布请求并且它不起作用。您可以使用此 pastebin.com/EBY9LmA7 代码创建简单的本地 html 文件。只有一个输入字段用于日期值，您可以看到验证是如何工作的。如果你取消注释第 11 行，你可以提交任何你想要的，因为验证不起作用。
@Sparky 可以使用这个pastebin.com/7aXVWeCQ 代码

标签： jquery jquery-ui jquery-validate twitter-bootstrap-2

【解决方案1】：

没有冲突...查看您的错误控制台。

问题在于您如何使用 .tooltip() 方法，而不是使用 jQuery Validate 或 jQuery UI。

错误：无法在初始化之前调用工具提示上的方法；试图调用方法'destroy'

删除.tooltip("destroy") 后，它开始工作...

演示：http://jsfiddle.net/guL85aa5/

【讨论】：

谢谢。工具提示现在不起作用，但也许我可以以某种方式管理它。
@Matt，这只是为了证明问题的根源。我相信您现在可以让 Tooltip 正常工作，因为您知道应该将精力集中在哪里。