CODEWITHSUNDEEP
htmlformsvalidationparsley.js
greaseMonkey
greaseMonkey

Reputation: 91

Validation with parsley after re-enabling fields

I am working on a form that has two pages, technically 1 page, just hiding the second until first is finished. My first task was to be able to "validate" the first page with parsley.js, without including the elements from the second page. I did this by disabling (via attr) the elements on the second page. Therefore only leaving the items on the first to be validated when the "Next" button is clicked. This works great!, unfortunately on the second page, after I removeAttr('disabled') from the elements, parsley ignores them and still only validates the first page, thus returning "true" and submitting the page without checking any elements from the second.

Thanks for reading!

Upvotes: 3

Views: 2336

Answers (1)

greaseMonkey
greaseMonkey

Reputation: 91

Ok so I figured this out just in case someone runs into this in the future.

After I loaded the second page, I destroyed the parsley and then re-added after the elements were re-enabled.

$('.new-account #page1 #next').on('click', function (e) {
    e.preventDefault(); 
    if ($('#new-account-form').parsley('isValid') == true) {
        $('#new-account-form .hide input').removeAttr('disabled');
        $('.new-account #page1').fadeOut(500, function() {
            $('.new-account #page2').fadeIn(500);
        });
        // destroy
        $('#new-account-form').parsley('destroy');
        // Re-assign parsley to the form to include the second page now
        $('#new-account-form').parsley();

    } else {
        $('#new-account-form').parsley('validate');
    }
});

Upvotes: 6

Related Questions