我希望将Jquery Validate与Tooltipster结合使用，与Sparky here提供的示例类似。
不同之处在于我需要在我动态创建的控件上显示这些错误消息，因为它显示为jsfiddle，它仅适用于static html控件（显示的输入和textarea）在“返回详细信息”字段集之前）
HTML code：
<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 CODE
$(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的类型选择器，但是它也不起作用。
有谁知道如何让tooltipster使用动态控制或者可以告诉我哪里出错？
提前致谢。
答案 0 :(得分：0)
1）我注意到您的动态<select>元素包含name="select"。 jQuery Validate插件要求每个input元素包含唯一 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。
但是，Tooltipster有一个小缺陷，因为当您动态更改页面布局时，任何打开的工具提示都不会在视觉上移动。换句话说，如果在添加新字段时工具提示已打开，则现有工具提示将不会在页面中向上/向下移动其目标元素。在演示中，单击“提交”以触发两个工具提示，然后添加新字段。两个工具提示不会随着它们的两个目标字段向下移动。然后，如果再次点击提交，您将有第三个工具提示正好位于现有工具提示的顶部。当您输入数据然后从各个字段中删除数据时，您可以看到它们正确的位置。
Tooltipster开发人员过去一直非常敏感。我建议你向他指出这些问题。
.tooltipster()附加到动态创建的元素的方法？