[JQUERY] 어떻게 Tooltipster 툴팁의 내부 플러그인 jQuery를 검증에서 메시지를 표시하려면?

어떻게 Tooltipster 툴팁의 내부 플러그인 jQuery를 검증에서 메시지를 표시하려면?

해결법

1. ---

   1.Tooltipster 버전 2.1, 3.0, 4.0 솔루션은이 답변에 포함되어 있습니다.

   Tooltipster 버전 2.1, 3.0, 4.0 솔루션은이 답변에 포함되어 있습니다.

   .tooltipster는 ()는 아래에있는 내 예제에서 유형 = "텍스트"입력 요소에 연결되어 있습니다. 양식은 유형 = "라디오"와 같은 데이터 입력 요소의 다른 종류, 유형 = "날짜", 텍스트 영역, 선택 등이 포함되어있는 경우에, 당신은 당신의 선택을 적절하게 조정하거나 이러한 다른위한 .tooltipster ()의 추가 인스턴스를 작성해야합니다 집단. 그렇지 않으면, 모든 오류와 함께 실패합니다.

   Tooltipster 2.1

   첫째, 오류를 표시하는 모든 특정 폼 요소 (모든 옵션 포함) Tooltipster 플러그인을 초기화 :

   $(document).ready(function () {
   
       // initialize tooltipster on form input elements
       $('#myform input[type="text"]').tooltipster({ 
           trigger: 'custom', // default is 'hover' which is no good here
           onlyOne: false,    // allow multiple tips to be open at a time
           position: 'right'  // display the tips to the right of the element
       });
   
   });
   

   둘째, 성공과 함께 Tooltipster의 고급 옵션을 사용하고 errorPlacement는 : 자동으로 유효성 검사 플러그인에 내장 된 콜백 기능을 보여주고 다음과 같이 툴팁을 숨길 수 :

   $(document).ready(function () {
   
       // initialize validate plugin on the form
       $('#myform').validate({
           // any other options & rules,
           errorPlacement: function (error, element) {
               $(element).tooltipster('update', $(error).text());
               $(element).tooltipster('show');
           },
           success: function (label, element) {
               $(element).tooltipster('hide');
           }
       });
   
   });
   

   작업 데모 : http://jsfiddle.net/2DUX2

   편집 : 새로운 Tooltipster의 API를 활용하는 코드 업데이트는 2/12/13에 버전 2.1 출시 기능

   Tooltipster 버전 3.0에 대한 업데이트

   3.0 Tooltipster 밖으로이며, 위의 그림과 같이 같은 동일하게 작동하지 않습니다. 다음 코드는 업데이트 된 예제를 제공합니다. 이 버전은 메시지가 아직 변경되지 않은 경우 모든 키 입력에 Tooltipster를 호출하지의 추가 혜택을했다.

   (당신은 아직도 위의 그림과 같이 해당 입력 요소에 () .tooltipster 연결해야한다는 것을 잊지 마십시오.)

   $(document).ready(function () {
   
       // initialize validate plugin on the form
       $('#myform').validate({
           // any other options & rules,
           errorPlacement: function (error, element) {
               var lastError = $(element).data('lastError'),
                   newError = $(error).text();
   
               $(element).data('lastError', newError);
   
               if(newError !== '' && newError !== lastError){
                   $(element).tooltipster('content', newError);
                   $(element).tooltipster('show');
               }
           },
           success: function (label, element) {
               $(element).tooltipster('hide');
           }
       });
   
   });
   

   DEMO는 Tooltipster 버전 3.0을 사용하여 : jsfiddle.net/2DUX2/3/를

   Tooltipster 버전 4.0에 대한 업데이트

   onlyOne 옵션은 Tooltipster 플러그인의 4.0 버전에서 제거 된 것을 참고.

   또한 unhighlight에 성공 콜백을 교체했다. "선택"필드에서 오류 메시지가 필드가 연속적으로 지워졌 때 성공 기능은 이러한 상황에서 화재를하지 않기 때문에 ... 이것이 제거되지 않았다. 이 문제는 Tooltipster 버전 4는 전진 그러나 다음 코드로 해결할 수있는 문제를 격리되지 않습니다.

   // initialize Tooltipster on text input elements
   $('input[type="text"]').tooltipster({ //find more options on the tooltipster page
       trigger: 'custom', // default is 'hover' which is no good here
       position: 'top',
       animation: 'grow'
   });
   
   // initialize jQuery Validate
   $("#myform").validate({
       errorPlacement: function (error, element) {
           var ele = $(element),
               err = $(error),
               msg = err.text();
           if (msg != null && msg !== '') {
               ele.tooltipster('content', msg);
               ele.tooltipster('open');
           }
       },
       unhighlight: function(element, errorClass, validClass) {
           $(element).removeClass(errorClass).addClass(validClass).tooltipster('close');
       },
       rules: {
           ....
   

   DEMO 사용 Tooltipster 4.0 : https://jsfiddle.net/h5grrrr9/

2. ---

   2.스파키의 대답은 내 사이트의 검증에 주식 있었지만 Tooltipster 4로 업그레이드하는 것은 약간의 변화를 요구하고있다. 여기에 내가 나의 일, 그리고 몇 가지 개선 가지고 방법입니다.

   스파키의 대답은 내 사이트의 검증에 주식 있었지만 Tooltipster 4로 업그레이드하는 것은 약간의 변화를 요구하고있다. 여기에 내가 나의 일, 그리고 몇 가지 개선 가지고 방법입니다.

   페이지에서 tooltipster의 CSS와 헤드 섹션의 테마 CSS (당신이 페이지에 설명 된대로 자신의 테마를 서브 클래 싱 것을 어떤 테마 CSS)를 포함한다.

   <link rel="stylesheet" type="text/css" href="/styles/tooltipster.bundle.css">
   <link rel="stylesheet" type="text/css" href="/styles/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css">
   

   또한 tooltipster의 자바 스크립트 파일을 포함해야합니다. 또한 JQuery와 유효성 검사 자바 스크립트가 필요합니다.

   <script src="/js/tooltipster.bundle.min.js"></script>
   <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
   

   이제 어느 다른 자바 스크립트 파일 또는 일부 스크립트 태그에, 당신은 당신의 유효성 검사 코드뿐만 아니라 tooltipster의 코드를 삽입해야합니다. 내가 가진 웹 페이지에서 다음의 하나는, 스파키의 대답의 변경은 상단에 있습니다.

   $(document).ready(function(){
   
       $('#form input[type="text"]').tooltipster({ //find more options on the tooltipster page
           trigger: 'custom', // default is 'hover' which is no good here
           onlyOne: false,    // allow multiple tips to be open at a time
           position: 'top',
           animation: 'grow', 
           theme: ['tooltipster-light'] //put your themes here
       });
   
       //form validation initialization
       $("#form").validate({
           errorPlacement: function (error, element) {
               if (error[0].innerHTML != null && error[0].innerHTML !== "") {
                   $(element).tooltipster('content', $(error).text());
                   $(element).tooltipster('open'); //open only if the error message is not blank. By default jquery-validate will return a label with no actual text in it so we have to check the innerHTML.
               }
           },
           success: function (label, element) {
               var obj = $(element);
               if (obj.hasClass('tooltipstered') && obj.hasClass('error')) {
                   $(element).tooltipster('close'); //hide no longer works in v4, must use close
               }   
           },
           rules: {
               // your rules
               ......
           }
       });
   
   });
   

   당신이 목록에 하나의 규칙을 위반하는 필드에 뭔가를 입력 할 때 이제 팝업은 무엇 JQuery와 - 유효성을 말하는 것은 잘못 말하는 상자 위에 올라옵니다. 이 (가 이상한 보이는, 종료 바로 다음 빈 툴팁을 열고 이어질 것)를 사용자에게 보여주기에 아무것도없는 경우에도 메시지를 열 수 없습니다.

from https://stackoverflow.com/questions/14741688/how-to-display-messages-from-jquery-validate-plugin-inside-of-tooltipster-toolti by cc-by-sa and MIT license