jquery validation not firing on dynamically added form fields

Question

jsfiddle to show: http://jsfiddle.net/2DUX2/277/

I'm trying to use jquery validate with tooltipster. It works until I try to add more items and then it tries to go to the form action instead of validating the new fields. Anyone know what I'm doing wrong?

$('#RMAForm input[type="text"], select').tooltipster({
    trigger: 'custom',
    onlyOne: false,
    position: 'right'
});

// initialize validate plugin on the form
$("#RMAForm").validate({
    // any other options & rules,
    errorPlacement: function (error, element) {
        var lastError = $(element).data('lastError'),
            newError = $(error).text();

        $(element).data('lastError', newError);

        if(newError !== '' && newError !== lastError){
            $(element).tooltipster('content', newError);
            $(element).tooltipster('show');
        }
    },
    success: function (label, element) {
        $(element).tooltipster('hide');
    }
});

I'm using the required class on the form elements

Sparky · Answer 1 · 2014-10-14T15:00:18.100

Normally, I would have said that you failed to declare the rules on the dynamically created elements. However, since you've declared rules via inline attributes, that part is working fine. A form that bypasses validation means that validation is being broken (this situation is not caused by failing to declare rules on dynamic elements).

In your case, the .validate() method is being broken by ToolTipster, as verified by the console error.

Error: You called Tooltipster's "content" method on an unitialized element

This means that you must also call the .tooltipster method after creating the new elements. I simply copied the following code into your click handler function and placed it after the new elements are created.

$("#AddOne").click(function () {

    // your code that creates new form elements.

    // attach ToolTipster to new elements here...

    $('#RMAForm input, select').tooltipster({
        trigger: 'custom',
        onlyOne: false,
        position: 'right'
    });

    ....

Working DEMO: http://jsfiddle.net/2DUX2/278/

score 0 · Answer 2 · answered Oct 13 '14 at 20:49

0

For dynamically added elements, you will have to use delegate function. Here is more about it: jquery delegate

answered Oct 13 '14 at 20:49

crazykru

29
5

You cannot add jQuery Validate rules to dynamically created fields in this fashion. However, it's a moot point as the OP's `.validate()` method is being broken by ToolTipster as per the console error. Finally, answers should be self-contained and specifically solve the OP's problem, not simply provide generic guidelines. – Sparky Oct 13 '14 at 22:00

jquery validation not firing on dynamically added form fields

2 Answers2