Parsley.js Validation Error triggered after retrieving Input via jQuery

Question

After dynamic table creation, I created a jQuery function that allows the user to copy chosen entries' input values into a staging area via buttons. The values are cloned successfully, but after each button click, the parsley validation error message

"This value should be a valid integer."

appears for every input in the table. Why is the validation perceiving an invalid number entered into the input, and how can this error message be avoided?

Also, there is a button that copies a group of inputs to a staging area, and after that click, the parsley validation error message does not appear. Can anyone see why the single copy would generate the validation message and the group copy would not? The only differences I see are that the validation-triggering code: 1) is called when a class member is clicked as opposed to an ID; and 2) uses the .closest(), .children(), and .eq() methods to navigate the table as opposed to using only IDs to reference table elements. Thanks very much in advance!

The dynamic table row creation in a loop after an AJAX call:

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);

Moving function that generates validation message:

$("#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
});

And finally, the group copying that doesn't generate any message via a "standardOffers" button, which I would also like the single-copy code to do:

$("#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);
            }
        }
    }
});

have you tried using event.preventDefault()'in the code when handling the button presses for the copy? — Ben Davison
– Ben Davison, Commented Jul 13, 2016 at 16:04
@BenDavison - I have not, but I'll try it. Thanks for the response! — jle
– jle, Commented Jul 13, 2016 at 16:08
to add to that, this is from the w3 schools page: The preventDefault() method does not prevent further propagation of an event through the DOM. Use the stopPropagation() method to handle this. link So that might be a better option. — Ben Davison
– Ben Davison, Commented Jul 13, 2016 at 16:12
@BenDavison - I'm still not sure why, but the preventDefault() worked to block the validation message during the event. If you wouldn't mind summarizing your comment in an answer, I'd be happy to mark it correct! — jle
– jle, Commented Jul 13, 2016 at 20:32

Ben Davison · Accepted Answer · 2016-07-15 09:38:53Z

1

Building on top of my comment:

You have 2 options:

event.preventDefault();

this will:

Cancels the event if it is cancelable, without stopping further propagation of the event.

Source

2nd Option:

event.stopPropagation();

this will:

Prevents further propagation of the current event in the capturing and bubbling phases.

Source

answered Jul 15, 2016 at 9:38

Ben Davison

7437 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Parsley.js Validation Error triggered after retrieving Input via jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related