2016-11-17 14 views
0

입력 유효성을 검사 한 후에 도구 설명이 사라지지 않고 계속 표시됩니다.jQuery 유효성 검사와 함께 qtip2를 사용하고 있습니다. 입력 유효성을 검사 한 후에 도구 설명이 사라지지 않습니다.

내 코드는 입력되었거나 입력 내용을 확인한 후에 어떻게 제거 할 수 있습니까? 내가 입력을 채우기 위해 시도 할 때마다이에서

$('#signupForm').validate({ 
      rules: { 
       username: { 
       required: true, 
       minlength: 3 
       }, 
       phone:{ 
       tel: true, 
       required: true 
       }, 
       message: { 
       required: true, 
       minlength:2 
       }, 
       email: { 
       required: true, 
       email: true 
       }, 
       captcha: { 
       required: true, 
       minlength: 5 
       } 
      }, 
      errorPlacement: function (error, element) { 
        flipIt = $(element).parents('div.left').length > 0, 
        position = { 
         at: 'center center', 
         my: 'top top' 
        }, 
        offset = flipIt ? 6 : 35; 
       $(element).filter(':not(.valid)').qtip({ 
        overwrite: false, 
        content: error, 
        position: position, 
        show: { 
         event: false, 
         ready: true 
        }, 
        hide: false, 
        style: { 
         classes: 'ui-tooltip-dark ui-tooltip-shadow', 
         tip: { 
          corner: true, 
          offset: offset 
         } 
        } 
       }).qtip('option', 'content.text', error); 
      } , 
      submitHandler: function (form) { 
        $(".contact-button").val("Please Wait..."); 
        $(".contact-button").prop('disabled', true); 
        $.ajax({ 
        type: "POST", 
        url: "ajax/contact_page.php", 
        data: 'username='+$("#username").val()+'&email='+$("#email").val()+'&phone='+$("#phone").val()+'&message='+$("#message").val()+'&captcha='+$("#captcha").val(), 
        timeout: 3000, 
        success:function(data){ 
         $("#mail-status").html(data); 
         $("#signupForm").find("input, textarea").val(""); 
         $(".contact-button").val("Sent"); 
         setTimeout(function() { 
          $('#signupForm').find('.valid').qtip('destroy'); 
         }, 1); 
         refreshCaptcha(); 
         setTimeout(function() { 
         $(".contact-button").prop('disabled', false); 
         $("#mail-status").text(""); 
         $(".contact-button").val('Click to Send'); 
         }, 10000); 
        }, 
        error: function() {alert('failed');} 
        }); 
      } 
     }); 

그것은 툴팁과 같은 오류 메시지가 표시하지만 내가 채울 경우는 오른쪽 (유효) 여전히 '팁'에 나타납니다. 어떻게 해결할 수 있습니까?

답변

1

현재까지의

hide: false 

변화가 : 제대로 작동 ...........하지만 거기에 또 다른 문제가 발생

hide: { when: { event: 'mousemove' }, 
      delay: 2000, 
      effect: function() { $(this).qtip("destroy"); } 
     } 
+0

, 그것은 도구 설명 메시지를 파괴 하지만 여전히 팁 상자 (빈 상자) –

+0

완전히 숨기기 속성 자체를 삭제하여보십시오. jsfiddle/jsbin에서 복제 할 수 있으며 –

+0

https://jsbin.com/saposudoqe/edit?html,css,js,console,output 보세요. –