Can parsley.js work with knockout.js?

Question

I just learned about parsley.js and I'm trying to add it's validation capabilities to my project that is already wired up with knockout.js bindings. Here is the markup:

<form id="form-add-gift" data-bind="submit: addGift" data-validate="parsley">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Gift</th><th>Description</th><th>Url</th><th></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td><input id="txtName" name="txtName" type="text" data-required="true" data-bind="value: newGift().name" /></td>
                <td><input id="txtDescription" name="txtDescription" type="text" data-bind="value: newGift().description" /></td>
                <td><input id="txtUrl" name="txtUrl" type="text" data-type="url" data-bind="value: newGift().url" /></td>
                <td><button id="btnAdd" name="btnAdd" class="btn" type="submit" data-bind="disable: newGift().name.length > 0">Add gift</button></td>
            </tr>
        </tfoot>
        <tbody data-bind="foreach: gifts">
            <tr>
                <td id="tdName" data-bind="text: name"></td>
                <td id="tdDescription" data-bind="text: description"></td>
                <td id="tdUrl" data-bind="text: url"></td>
                <td><a id="btnRemove" class="btn btn-danger" href="#" data-bind="disabled: $parent.isClaimed, click: $parent.removeGift">Remove</a></td>
            </tr>
        </tbody>
    </table>
</form>

When I click the "Add gift" button, my knockout.js addGift() function fires and the parsley.js validation occurs afterward. Obviously this is incorrect. Is there any way to get parsley.js to play nice with the knockout.js bindings?

Answer 1

I don't think parsley.js meant to work directly with KnockoutJs, but this can't stop you from using them both nicely.

Quick look through the Documentation -> Javascript - > Form you can use this method:

$('#form').parsley('isValid');

Useful if you want to integrate the form validation process inside custom functions, without triggering error messages.

UPDATE

you can try this too:

$( '#form' ).parsley( 'validate' );

Useful if you want to integrate the form validation process inside custom functions.