javascript - 使用 parsleyjs 验证后启用提交按钮

Question

Parsley 是否有一种简单的方法来加载禁用提交按钮的表单并在满足表单的所有验证要求的情况下启用它？

Answer 1

我不确定您所说的“简单”是什么意思，但您之后可以完成什么。

您需要listen to the events parsley:form:success 和 parsley:form:error 启用/禁用按钮。

您还需要监控每个表单字段的更改，以强制 Parsley 进行验证。通常，一旦您单击 submit，Parsley 就会执行验证。由于提交被禁用，您需要手动触发验证。

所以，这是一个工作示例 ( jsfiddle ):

<form>
    <input type="text" name="field" data-parsley-required />
    <button type="submit" disabled>Submit</button>
</form>

<script>
$(document).ready(function() {
    // bind Parsley to the form
    $("form").parsley();

    // Whenever parsley validates successfully, we enable the submit button
    $.listen('parsley:form:success', function(ParsleyForm) {
        ParsleyForm.$element.find('button').prop('disabled', false);
    });

    // When a validation error occurs, we disable the submit button
    $.listen('parsley:form:error', function(ParsleyForm) {
        ParsleyForm.$element.find('button').prop('disabled', true);
    });

    // We need to monitor all form fields and force Parsley's validation manually
    // This will result in enabling or disabling the submit button
    $("form :input").change(function() {
        $(this).closest('form').parsley().validate();
    });
});
</script>

请注意，您需要监控所有字段(输入、选择、文本区域等)的更改。