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 } 
       } 
      }); 
    }