Disable submit submission when form is invalid using Parsleyjs

Question

I cannot find documentation to help me figure this out. For Parsleys, this seems like a very simple task.

I want, until my form is valid, to disable the submit button - this is my default value in my HTML: <input id="new-node-form-submit" type="submit" value="done" disabled>

When the form knows that it is valid, it must remove the disabled attribute from the submit button. If the form becomes invalid again when the user fills it out, the disabled attribute must be added back.

I am trying to use the Parsley documentation to add a listener to the form, and then check if the form is valid, but I cannot get it to work. Any suggestions? It seems very simple that somehow I do not get it.

$( '#new-node-form' ).parsley( 'addListener', {
    var isValid = $( '#new-node-form' ).parsley ( 'validate' );
    if(isValid == true) {
        console.log("Your form is valid!");
    }
}

Answer 1

Your javascript is not valid in the example you provided. The second argument to invoke parsley('addListener')should be a javascript object in which the properties of the object are loopback events to add a listener to:

var $form = $('#new-node-form');

$form.parsley('addListener', {
    onFieldValidate: function() {
        console.log('form valid=', $form.parsley('isValid'));
    }
});

Answer 2

The question is old, and probably parsley has updated its API, but I can’t get it to addListenerwork, here is an alternative:

$(function() {
    window.Parsley.on('field:validate', function() {
        var form = this.$element.closest("form"),
            submit = form.find('.xbtn-submit');
        if (form.parsley().isValid()) {
            submit.removeAttr("disabled");
        } else {
            submit.attr("disabled", "disabled");
        }
    });
});