Jquery validate 在Tooltipster工具提示中显示来自jQuery验证插件的消息,但验证动态创建的控件
我希望以与提供的示例类似的方式将Jquery验证与Tooltipster结合使用 不同之处在于,我需要在我动态创建的控件上显示这些错误消息,如图所示,它仅适用于Jquery validate 在Tooltipster工具提示中显示来自jQuery验证插件的消息,但验证动态创建的控件,jquery-validate,tooltipster,Jquery Validate,Tooltipster,我希望以与提供的示例类似的方式将Jquery验证与Tooltipster结合使用 不同之处在于,我需要在我动态创建的控件上显示这些错误消息,如图所示,它仅适用于静态html控件(在“Return Details”字段集之前显示的输入和文本区域) HTML代码: <form id="myform"> <table align="center" style="width: 100%"> <tr> <td>
静态
html控件(在“Return Details”字段集之前显示的输入和文本区域)
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!!!");
}
});
});
$(文档).ready(函数(){
var counter=0;//行数计数器
var c_nombreturno=null;
var c_TipoRetorno=null;
$(“#添加行”)。在('单击',函数(){
计数器=计数器+1;
var newnombreturno=“nombreturno”+计数器;
var newtiporeturno=“tiporeturno”+计数器;
//柬埔寨
var newEnlaceEstruct=“tbExp_s1_e”+计数器;
var newRow='Return#'+counter+':'+
''+'姓名'+
'' + '' +
“数据类型”+
“Seleccione…NumberText”+
'' +
'' +
'';
$('table.tabla-returno>tbody').append(newRow);
var=计数器;
$('#tbStructures>tbody')。追加('');
$('#r'+iEst).append('用于returno的Esstructure(Frame)'+iEst+'')
var idEst='e'+iEst;
var idSent='s1_u'+idEst;
$('#'+idEst).append('expressiontype
');
变量IDDEVAL='div_uu'+idSent;
$('#'+idSent).append('
');
var idTbSent='tbExp_uuu'+idSent;
$('#'+iddivet).append('');
$('#'+idTbSent).append('');
var fila_1='如果(';
fila_1+=':)';
$('#'+idTbSent+'>tbody')。追加(fila_1);
var filas_footer='';
filas_footer+=“Else()”;
$(“#”+idTbSent+“>tfoot”).append(filas#u footer);
addEventNewRow('btnAñadir_'+idTbSent);
$(.deleteFila”)。在(“单击”上,函数(事件){
$(this).tr.remove();
});
});
函数addEventNewRow(elemId){
元素=$(“#”+elemId);
元素开启('点击',功能(){
var tbId=$(this).closest(“table”).attr(“id”);
var ID=待拆分(“”);
var estId=IDs[2];
var c_tb=$('input[id=“c_'+tbId+'”]);
var c_condicines=parseInt(c_tb.val());
c_条件=c_条件+1;
var newCondition=“exp”+c_conditions+“_”+tbId;
var newTrueValue=“ret”+c_conditions+“u”+tbId;
var idBtnQuitar=“Btquitar”+c条件+”+tbId;
var newRow='ELSE IF()';
newRow+=':)';
newRow+='';
$('#'+tbId+'>tbody').append(newRow);
//更新计数器“c_条件”
c_tb.val(c_条件);
$('#'+idBtnQuitar).addClass('deletRow');
$(“.deletRow”)。在(“单击”)上,函数(事件){
$(this).tr.remove();
});
});
}
//$('#myform input[type=“text”]')。工具提示({
$('.tooltip').tooltipster({
触发器:'自定义',//默认值为'hover',这在这里不好
onlyOne:false,//允许一次打开多个提示
位置:“right”//在元素右侧显示提示
});
var dialogFormValidator=$(“#myform”).validate({
//任何其他选项和规则,
errorPlacement:函数(错误,元素){
$(元素).tooltipster('更新',$(错误).text());
$(元素).tooltipster('show');
},
成功:功能(标签、元素){
$(元素).tooltipster('hide');
},
submitHandler:函数(表单){
表单提交();
}
});
$(“#btneviar”)。单击(函数(){
var valid=dialogFormValidator.form();
如果(有效){
警报(“有效!!”)
}否则{
警告(“无效!!!”;
}
});
});
在JSFIDLE中,我使用一个类tooltip
将工具提示消息附加到所有我想要验证的控件上。我还尝试使用类型选择器,比如Sparky在他的示例中使用的类型选择器,但它也不起作用
有人知道如何让tooltipster使用动态控制,或者告诉我哪里出了问题吗
提前感谢。1)我注意到您的动态
元素包含name=“select”
。jQuery验证插件要求每个输入元素包含唯一的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'
});
});