qtip2 : 형식이 잘못된 필드에 대한 툴팁 표시

Question

jQuery Validate 및 qTp2와 같은 여러 플러그인을 사용하고 있습니다. 해당 툴팁의 문제는 표시되지 않으며 오류가 없으며 그 이유를 이해할 수 없습니다. 코드 또는 DEMO는 :

<div style="float: left; width: 470px;" id="register_cont"> 
     <form method="POST" action="/Account/Register" class="fancy_form" id="reg_form_pay"> 
     <div style="margin-bottom: 10px;" class="wrap_input"> 
      <p class="inp_label">First name:</p> 
      <i>&nbsp;</i> 
      <input type="text" style="width: 157px;" name="FirstName" value="" data-description="Enter first name" id="pay_firstname"> 
     </div> 
     <div style="margin-bottom: 10px;" class="wrap_input"> 
      <p class="inp_label">Surname:</p> 
      <i>&nbsp;</i> 
      <input type="text" style="width: 140px;" name="Surname" value="" data-description="Enter last name" id="pay_lastname"> 
     </div> 
     <div style="margin-bottom: 10px; margin-top: 34px;" class="wrap_input"> 
      <p class="inp_label">E-mail:</p> 
      <i>&nbsp;</i> 
      <input type="text" style="width: 157px;" name="Email" value="" data-description="Enter email" id="pay_email"> 
     </div> 
     <div style="margin-top: 34px;" class="wrap_input"> 
      <p class="inp_label">Phone:</p> 
      <i>&nbsp;</i> 
      <input type="text" style="width: 157px;" name="PhoneNumber" value="" data-description="Enter phone number" id="pay_phone"> 
     </div> 
     </form> 
    </div> 

<button style="margin-top: 27px;" type="button" class="wiz_button wizard_prev_step long"><span><span>Check</span></span></button> 

$("#reg_form_pay").validate({ 
      rules: { 
       Email: { required: true, email: true }, 
       PhoneNumber: { required: true, checkPhoneNumber: true }, 
       FirstName: { required: true }, 
       Surname: { required: true } 
      }, 
      errorElement: "", 
      showErrors: function (errorMap, errorList) { 
       $('.wrap_input').removeClass('error'); 
       $('#reg_form_pay input').width(157); 
       $.each(errorList, function (i, e) { 
        $(e.element).closest('.wrap_input').addClass('error'); 
        var newWidth = $(e.element).width() - 17; 
        $(e.element).width(newWidth); 
       }); 
       updateQTip(); //call every time when error exist 
      }, 
      onkeyup: false 
     }); 

    function updateQTip() {   
      $('.wrap_input.error input').qtip({ 
       text: function (api) { 
        return $(this).attr('data-description'); 
       }, 
       position: { 
        target: 'mouse', 
        adjust: { x: 5, y: 17 } 
       }, 
       style: { 
        tip: { corner: false } 
       } 
      }); 
    } 


$.validator.addMethod("checkPhoneNumber", function (value, element) { 

     if (!value) return true; 
     return /^((\+7)|8)(700|701|702|705|707|712|713|717|718,721|725|726|727|777)[0-9]{7}$/.test(value); 
    }, "Wrong Phone"); 


$('button ').click(function() { 
      if (!$('#reg_form_pay').valid()) 
       return; 

    alert('valid'); 
}) 

Answer 1

는 text는 툴팁 PARAMS에 content로 변경해야처럼 보인다. 체크 아웃 fiddle

function updateQTip() {   
      $('.wrap_input.error input').qtip({ 
       content: function (api) { 
        return $(this).attr('data-description'); 
       }, 
       position: { 
        target: 'mouse', 
        adjust: { x: 5, y: 17 } 
       }, 
       style: { 
        tip: { corner: false } 
       } 
      }); 
    }