通过 jQuery 检索输入后触发 Parsley.js 验证错误答案

【问题标题】：Parsley.js Validation Error triggered after retrieving Input via jQuery通过 jQuery 检索输入后触发 Parsley.js 验证错误
【发布时间】：2016-07-13 15:47:28
【问题描述】：

创建动态表后，我创建了一个 jQuery 函数，允许用户通过按钮将所选条目的输入值复制到暂存区域。值克隆成功，但每次点击按钮后，欧芹验证错误消息

“这个值应该是一个有效的整数。”

出现在表中的每个输入中。为什么验证会感知输入的数字无效，如何避免此错误消息？

另外，还有一个按钮可以将一组输入复制到暂存区域，然后单击后，不会出现 parsley 验证错误消息。谁能看到为什么单个副本会生成验证消息而组副本不会？我看到的唯一区别是验证触发代码：1）在单击类成员而不是 ID 时调用；和 2) 使用 .closest()、.children() 和 .eq() 方法来导航表格，而不是仅使用 ID 来引用表格元素。提前非常感谢！

AJAX 调用后循环创建动态表行：

var row = $('<tr></tr>');

var idCell = $('<td></td>').append($('<input type="submit" class="btn btn-info contractToOffer" value="Add To Contracts">'));
row.append(idCell);

idCell = $('<td class="text-center" id="contractID' + data[i].ContractID + '"></td>').append(data[i].ContractID);
row.append(idCell);

idCell = $('<td class="text-center"></td>').append(Number(Number(data[i].ContractPrice) + Number(data[i].ContractMargin)).toFixed(2));
row.append(idCell);

idCell = $('<td class="text-center"><input id="contractValue' + data[i].ContractID + '" value="' + Number(Number(data[i].ContractPrice) + Number(data[i].ContractMargin)).toFixed(2) + '" step="0.01" class="contractInput" type="number" name="quantity" min="1" max="50000"></td>').append();
row.append(idCell);

生成验证消息的移动函数：

$("#contractPanel").on("click", ".contractToOffer", function () {
    var $offerContractOne = $("#OfferContract1"),//In staging area
        $offerPriceOne = $(".price1"),//Also in staging area
        $movingContract = 0,
        $movingPrice = 0.00,
        $oCells = $(this).closest('tr').children('td');

    $movingContract = $oCells.eq(1).text();
    $movingPrice = $("#contractValue" + $movingTerm.toString()).val();
    $offerContractOne.val($movingTerm);//Staging area
    $offerPriceOne.text($movingPrice);//Also staging area
});

最后，通过“standardOffers”按钮不生成任何消息的组复制，我也希望单副本代码这样做：

$("#contractPanel").on("click", "#standardOffers", function () {
    var $oContractOne = $("#OfferContract1"),
        $oPriceOne = $(".price1"),
        $oContractTwo = $("#OfferContract2"),
        $oPriceTwo = $(".price2"),
        $oContractThree = $("#OfferContract3"),
        $oPriceThree = $(".price3"),
        $oContractFour = $("#OfferContract4"),
        $oPriceFour = $(".price4"),
        $oContractFive = $("#OfferContract5"),
        $oPriceFive = $(".price5"),
        //The preceding are in the staging area
        $standardPrice = 0.00

    for (var i = 1; i < 6; i = i + 1) {
        if ($("#contractID" + i).length > 0) {
            $standardPrice = $("#contractValue" + i.toString()).val();
            if (i == 1) {
                $oContractOne.val(i.toString());
                $oPriceOne.text($standardPrice);
            }
            else if (i == 2) {
                $oContractTwo.val(i.toString());
                $oPriceTwo.text($standardPrice);
            }
            else if (i == 3) {
                $oContractThree.val(i.toString());
                $oPriceThree.text($standardPrice);
            }
            else if (i == 4) {
                $oContractFour.val(i.toString());
                $oPriceFour.text($standardPrice);
            }
            else {
                $oContractFive.val(i.toString());
                $oPriceFive.text($standardPrice);
            }
        }
    }
});

【问题讨论】：

在处理复制按钮按下时，您是否尝试过在代码中使用event.preventDefault()'？
@BenDavison - 我没有，但我会试试的。感谢您的回复！
补充一点，这是来自 w3 学校页面： preventDefault() 方法不会阻止事件通过 DOM 进一步传播。使用 stopPropagation() 方法来处理这个问题。 link 所以这可能是一个更好的选择。
@BenDavison - 我仍然不知道为什么，但是 preventDefault() 在活动期间阻止了验证消息。如果您不介意在答案中总结您的评论，我很乐意将其标记为正确！

标签： javascript jquery html ajax validation

【解决方案1】：

基于我的评论：

你有两个选择：

event.preventDefault();

这将：

如果事件可取消，则取消该事件，而不停止事件的进一步传播。

Source

第二个选项：

event.stopPropagation();

这将：

防止当前事件在捕获和冒泡阶段进一步传播。

Source

【讨论】：