Question

已编辑以更新到最新结果在表单上插入新的INPUT时，我确保指定所需的INPUT。我得到了相同的类附加到工作的输入和不起作用的输入。但是，工具提示不会出现在动态添加的输入元素上，并且可以在工具提示应用于文档就绪时使用工具提示。

我能够做的是，如果我浏览每个新创建的元素并且有效（），则会显示工具提示并且验证工作正常。依赖于form valid（）会跳过新添加的元素。希望这足以满足所请求的代码。我尝试插入带有和不带“必需”选项的元素。有什么必须做的吗？预期的最终元素如下所示：

$("#save").click(function()
{
    setToolTips(); //make sure tooltipster is assigned to newly createde elements
    var addedValid = true;
    //needed to do validation on newly created elements
    $('input.added').each(function() { 
        if(!$(this).valid())
            addedValid = false;
    });

    if (!$('#create_project').valid() || !addedValid) return false;
    //irrelevant after this
 });

$(".add_milestone span ").click(function () {

    var html = '' +
        '<input data-rule-required="true" required="required" id="milestone_' + current_milestone + '" type="text" ' +
        '               class=" w250 error added" aria-required="true"  />' +
        '</div>';

    $(".items").append(html);
    current_milestone++;
});

function setToolTips(position) {
    if (position == 'undefined')
        position = 'right';
    $('form :input[required],:input[id="phone"]').tooltipster({
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false, // allow multiple tips to be open at a time
        position: position,  // display the tips to the right of the element
        autoClose : true,
        hideOnClick : true,
        delay: 100,
        timer : 1200,
        theme: 'tooltipster-light'
    });
}

$("#save").click(function()
{
    setToolTips(); //make sure tooltipster is assigned to newly createde elements
    var addedValid = true;
    //needed to do validation on newly created elements
    $('input.added').each(function() { 
        if(!$(this).valid())
            addedValid = false;
    });

    if (!$('#create_project').valid() || !addedValid) return false;
    //irrelevant after this
 });

$(".add_milestone span ").click(function () {

    var html = '' +
        '<input data-rule-required="true" required="required" id="milestone_' + current_milestone + '" type="text" ' +
        '               class=" w250 error added" aria-required="true"  />' +
        '</div>';

    $(".items").append(html);
    current_milestone++;
});

function setToolTips(position) {
    if (position == 'undefined')
        position = 'right';
    $('form :input[required],:input[id="phone"]').tooltipster({
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false, // allow multiple tips to be open at a time
        position: position,  // display the tips to the right of the element
        autoClose : true,
        hideOnClick : true,
        delay: 100,
        timer : 1200,
        theme: 'tooltipster-light'
    });
}

Answer 1

我已查看您的代码并发现您已使用$(this).valid() 我想这是你的错。您必须使用 ID 表单而不是 $(this)

因此对于ie：

$('#formID').valid()

jquery验证不适用于动态添加的输入

1 个答案: