2014-10-30 59 views
1

我有簡單的.jsp頁面,它使用更多的JavaScript庫。在頁面上是一個帶有輸入字段的表單。我想爲此輸入字段使用Validation插件,並且我使用了this教程,因爲我使用Bootstrap 2.3.2。jQuery UI和jQuery驗證衝突

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> 

如果我刪除的路徑,這個庫,驗證的行爲預期。如果我導入這個庫,驗證不起作用,我需要這個庫用於其他組件。

+0

解釋正是你的意思是「不工作」,因爲有使用jQuery沒有已知問題與jQuery UI一起驗證。 – Sparky 2014-10-30 19:20:51

+0

@Sparky「不起作用」我的意思是頁面提交的輸入值無效。如果路徑jquery ui被刪除,表單不會被提交。 – Matt 2014-10-30 19:28:32

+0

請爲此問題創建一個jsFiddle演示。 – Sparky 2014-10-30 19:37:04

回答

2

沒有衝突... 看看你的錯誤控制檯。

問題在於你如何使用.tooltip()方法,而不是使用jQuery Validate或jQuery UI。

Error: Cannot call methods on tooltip prior to initialization; attempted to call method 'destroy'

隨着.tooltip("destroy")刪除,它開始工作......

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

+0

謝謝。工具提示現在不起作用,但可能我可以通過這種方式進行管理。 – Matt 2014-10-30 20:59:53

+0

@Matt,這只是爲了證明問題的根源。我相信你現在可以讓Tooltip工作,知道你的工作重點在哪裏。 – Sparky 2014-10-30 21:02:19