javascript - Disable submit input when form is not valid using Parsleyjs

Question

I can't find any documentation that is helping me figure this out. It seems like a very straightforward thing for Parsleyjs to do.

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

When the form knows it's valid, it should remove the disabled attribute from the submit button. If the form becomes invalid again as the user is filling it out, the disabled attribute should 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 can't seem to get this working. Any suggestions? This seems like a really straightforward thing that somehow I am just not getting.

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

Answer 1

在您提供的示例中，您的 javascript 无效。调用的第二个参数parsley('addListener')应该是一个 javascript 对象，其中对象的属性是要添加侦听器的欧芹事件：

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

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

Answer 2

这个问题很老，可能欧芹更新了它的API，但我无法addListener工作，这是一个替代方案：

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