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更改为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 }
                }
            });
    }

qtip2：显示表单中无效字段的工具提示

1 个答案: