Question

我有简单的.jsp页面，它使用了更多的JavaScript库。在页面上是一个带输入字段的表单。我想为这个输入字段使用Validation插件，我使用了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>

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

Answer 1

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

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

错误：在初始化之前无法在工具提示上调用方法;试图调用方法＆＃39;销毁＆＃39;

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

DEMO：http://jsfiddle.net/guL85aa5/

jQuery UI和jQuery Validation冲突

1 个答案: