jQuery UI和jQuery验证冲突

我有简单的.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>

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

来源

2014-10-30 Matt

解释正是你的意思是“不工作”，因为有使用jQuery没有已知问题与jQuery UI一起验证。 – Sparky 2014-10-30 19:20:51

@Sparky“不起作用”我的意思是页面提交的输入值无效。如果路径jquery ui被删除，表单不会被提交。 – Matt 2014-10-30 19:28:32

请为此问题创建一个jsFiddle演示。 – Sparky 2014-10-30 19:37:04

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

问题在于你如何使用.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/

来源

2014-10-30 20:46:24 Sparky

谢谢。工具提示现在不起作用，但可能我可以通过这种方式进行管理。 – Matt 2014-10-30 20:59:53

@Matt，这只是为了证明问题的根源。我相信你现在可以让Tooltip工作，知道你的工作重点在哪里。 – Sparky 2014-10-30 21:02:19

jQuery UI和jQuery验证冲突

回答

相关问题