1

我想以与Sparky here提供的示例类似的方式使用 Jquery Validate 和 Tooltipster 。

不同之处在于我需要在动态创建的控件上显示这些错误消息，并且显示的是这个jsfiddle，它仅适用于statichtml 控件（“返回详细信息”字段集之前显示的输入和文本区域）

HTML 代码：

<form id="myform">
    <table align="center" style="width: 100%">
        <tr>
            <td>
                <input id="title" type="text" name="title" class="required tooltip" />
                <br>
                <textarea id="comments" name="comments" class="required tooltip"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <table align="center" style="width: 70%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <fieldset>
                                <legend>Return Details</legend>
                                <input id="addRow" type="button" value="+ Add Frame " class="button small blue" style="height: 20px;" />
                                <table id="tbRetornosModelos" class="tabla-retorno" width="100%" border="0">
                                    <tbody></tbody>
                                </table>
                            </fieldset>
                        </td>
                    </tr>
                </table>
                <table id="tbStructures" align="center" style="width: 70%" cellpadding="0" cellspacing="0">
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <td>
                                <input type="button" id="btnEnviar" value="Send" />
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </td>
        </tr>
    </table>
</form>

JS代码

$(document).ready(function () {
    var counter = 0; // Counter for number of rows
    var c_NombreRetorno = null;
    var c_TipoRetorno = null;

    $("#addRow").on('click', function () {
        counter = counter + 1;

        var newNombreRetorno = "NombreRetorno" + counter;
        var newTipoRetorno = "TipoRetorno" + counter;
        //Cambiar               
        var newEnlaceEstruct = "tbExp_s1_e" + counter;
        var newRow = '<tr><td style="font-weight:bold; width:100px;">Return # ' + counter + ':  </td>' +
            '<td>' + '  Name</td>' +
            '<td><input type="text" id="' + newNombreRetorno + '" name="' + newNombreRetorno + '" class="required tooltip"/>' + '</td>' +
            '<td>Data Type</td>' +
            '<td><select name="select" id="' + newTipoRetorno + '" class="required tooltip"> <option value="" selected>Seleccione...</option> <option value="Number" >Number</option><option value="Text">Text</option></select></td>' +
            '<td><input type="button" value="-Remove" class="button small blue deleteFila"  style="height:20px;"></td>' +
            '<td><input type="hidden" id="enlace' + counter + '" value="' + newEnlaceEstruct + '" /></td>' +
            '</tr>';
        $('table.tabla-retorno >tbody').append(newRow);



        var iEst = counter;
        $('#tbStructures >tbody').append('<tr id="r' + iEst + '"></tr>');
        $('#r' + iEst).append('<td><fieldset id="e' + iEst + '"><legend>Estructure(Frame) For Retorno # ' + iEst + '</legend></fieldset></td>')
        var idEst = 'e' + iEst;
        var idSent = 's1_' + idEst;
        $('#' + idEst).append('<div><span>Expression Type</span><select id="tipoExp_' + idEst + '"></select></div><hr><fieldset id="' + idSent + '"></fieldset>');
        var idDivEst = 'div_' + idSent;
        $('#' + idSent).append('<div><select id="subTipoExp_' + idSent + '"></select></div></div><br/><div id="' + idDivEst + '"></div>');
        var idTbSent = 'tbExp_' + idSent;
        $('#' + idDivEst).append('<table id ="' + idTbSent + '" class="order-list" align="center" cellpadding="0" cellspacing="0"></table>');
        $('#' + idTbSent).append('<tbody></tbody><tfoot></tfoot>');
        var fila_1 = '<tr><td><span class="rightAlig">IF</span>(<input type="text" id="exp1_' + idTbSent + '" name="exp1_' + idTbSent + '" class="conditionInput required tooltip" /></td>';
        fila_1 += '<td>:<input type="text" id="ret1_' + idTbSent + '" name="ret1_' + idTbSent + '" class="required tooltip" />)</td><td></td></tr>';
        $('#' + idTbSent + ' > tbody').append(fila_1);

        var filas_footer = '<tr><td colspan="3" style="text-align: left;"><input type="button" id="btnAñadir_' + idTbSent + '" value="+ Add" class="button small blue agregarCond" /></td></tr>';
        filas_footer += '<tr><td colspan="3"><span>Else</span>(<input type="text" id="else_' + idTbSent + '" name="else_' + idTbSent + '" class="required tooltip" />)<input type="hidden" id="c_' + idTbSent + '" value="1" /></td></tr>';
        $('#' + idTbSent + ' > tfoot').append(filas_footer);

        addEventNewRow('btnAñadir_' + idTbSent);
        $(".deleteFila").on("click", function (event) {
            $(this).closest("tr").remove();
        });
    });

    function addEventNewRow(elemId) {
        elem = $("#" + elemId);
        elem.on('click', function () {

            var tbId = $(this).closest("table").attr("id");
            var IDs = tbId.split("_");
            var estId = IDs[2];
            var c_tb = $('input[id="c_' + tbId + '"]');
            var c_condiciones = parseInt(c_tb.val());
            c_condiciones = c_condiciones + 1;
            var newCondition = "exp" + c_condiciones + "_" + tbId;
            var newTrueValue = "ret" + c_condiciones + "_" + tbId;
            var idBtnQuitar = "btnQuitar_" + c_condiciones + "_" + tbId;

            var newRow = '<tr><td><span>ELSE IF</span>(<input type="text" id="' + newCondition + '" name="' + newCondition + '" class="conditionInput required tooltip"/>) </td>';
            newRow += '<td>:<input type="text" id="' + newTrueValue + '" name="' + newTrueValue + '" class="required tooltip"/>)</td>';
            newRow += '<td><input type="button" id="' + idBtnQuitar + '" value="-Remove" class="button small blue"></td></tr>';
            $('#' + tbId + ' >tbody').append(newRow);

            //update counter "c_condiciones"
            c_tb.val(c_condiciones);

            $('#' + idBtnQuitar).addClass('deletRow');

            $(".deletRow").on("click", function (event) {

                $(this).closest("tr").remove();


            });
        });
    }
    //$('#myform input[type="text"]').tooltipster({
    $('.tooltip').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
    });
    var dialogFormValidator = $("#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');
        },
        submitHandler: function (form) {
            form.submit();
        }
    });

    $("#btnEnviar").click(function () {
        var valid = dialogFormValidator.form();
        if (valid) {
            alert("valid!!")
        } else {
            alert("invalid!!!");
        }
    });


});

在那个 jsfiddle 中，我使用一个类tooltip将工具提示消息附加到我想要验证的所有控件。我也尝试使用像 Sparky 在他的示例中使用的类型选择器，但它也不起作用。

有谁知道我怎样才能让工具提示器使用动态控制，或者可以告诉我哪里出错了？

提前致谢。

4

1 回答 1

0

1）我注意到您的动态<select>元素包含name="select". jQuery Validate 插件要求每个输入元素都包含一个唯一的 name属性。您必须解决此问题，否则只会name="select"验证第一个实例。

2）工具提示不适用于动态元素，因为.tooltipster()仅在 DOM 准备好时附加到现有输入元素。如果您要动态创建新的输入元素，那么您还需要在创建.tooltipster()这些新元素后附加它们。这是唯一的方法，除非/直到.tooltipster()开发人员提供委托方法。

// dynamically add new input elements
$('#add').on('click', function () {
    $('#myform').append('your new html:  <input class="new" type="text" />');
    $('.new').tooltipster({  // initialize tooltips on new elements
        trigger: 'custom',
        onlyOne: false,
        position: 'right'
    });
});

这是一个“证明”，表明您可以在动态创建的字段上使用 Tooltipster。

http://jsfiddle.net/dCyj8/

但是，Tooltipster 有一个小缺陷，即当您动态更改页面布局时，任何打开的工具提示都不会在视觉上发生变化。换句话说，如果在您添加新字段时工具提示已经打开，则现有工具提示将不会随其目标元素在页面上上下移动。在演示中，单击提交触发两个工具提示，然后添加新字段。这两个工具提示不会连同它们的两个目标字段一起向下移动。然后，如果您再次点击提交，您将有第三个工具提示正好位于现有工具提示之上。当您输入数据然后从各个字段中删除数据时，您可以看到它们正确到正确的位置。

Tooltipster 开发人员过去一直非常敏感。我建议你向他指出这些问题。

  • 委托.tooltipster()附加到动态创建的元素的方法？
  • 动态移动工具提示以及动态移动布局？
于 2013-10-09T16:34:26.227 回答