javascript - parsley.js - 禁用最大长度验证

Question

当用户在表单的选择列表中进行选择时，我试图在我的几个输入字段上动态禁用 parsley.js 最大长度。

我读过这个thread ，但是当我将代码放入我的字段时，欧芹没有被触发，而是表单提交了，我不明白为什么。

我已阅读 parsley.js 文档，但我不明白为什么在我添加以下代码行时会忽略 parsley.js 验证:

$('#id_employment_record_position_title').attr('data-parsley-maxlength', '0');

或

$('#id_employment_record_position_title').attr('data-parsley-maxlength', '150');

这是我的代码，用于在用户更改表单上的选择列表时动态打开和关闭 parsley 验证:

function toggleFormDetails() {

    if ( $('#id_employment_record_display_type').val() == '8888' || $('#id_employment_record_display_type').val() == '9999' ) {

        //disable the input field.        
        $('#id_employment_record_position_title').prop('disabled', true); 
        ....

        //destroy parsley on the form.
        //$('#employment_history_details_form').parsley().destroy();

        //disable the parsley maxlength, when the input field is disabled.
        $('#id_employment_record_position_title').attr('data-parsley-maxlength', '0');

        //reinitialise parsley on the form.
        //$('#employment_history_details_form').parsley();

    } else {

        //enable the input field.
        $('#id_employment_record_position_title').prop('disabled', false);
        ....

        //destroy parsley on the form.
        //$('#employment_history_details_form').parsley().destroy();

        //change the parsley cs error values for all the required form inputs.
        $('#id_employment_record_position_title').attr('data-parsley-maxlength', '150');

        //reinitialise parsley on the form.
        //$('#employment_history_details_form').parsley();

    }

}

为什么我必须在表单上添加 destroy 和 create parsley 代码(我在上面已经注释掉了它们)？

为此编写自定义验证会更好吗？如果是这样，我该怎么做，因为我的 js 代码技能还不够好？

Answer 1

Parsley 是一个 Javascript 库，其工作方式如下:

1. 呈现 html 表单时，您通过数据属性指定所需的验证。

2. 您表明表单将由 Parsley 使用表单属性 data-parsley-validate 或通过 javascript 通过 $("#form").parsley( )。

当 parsley 绑定(bind)到您的表单时(第二步)，将创建一个 ParsleyForm 类型的对象，其中包含每个字段的约束。

创建对象后，不再需要html属性。因此，如果您更改任何属性，它不会影响验证，因为 Parsley 将验证 javascript 对象的约束。这就是为什么您需要销毁和绑定(bind)欧芹(以便使用新约束重新创建欧芹实例)。

为了解决您的问题，您可以这样做:

<form id="myForm" class="form-horizontal" method="post">
    <input type="text" name="id_employment_record_display_type"
            id="id_employment_record_display_type"
            placeholder="Set 8888 to discard maxlength validation" />
    <input type="text" name="sample" id="id_employment_record_position_title" 
            data-parsley-maxlength="150" />
    <button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
    $("#myForm").parsley();

    $("#id_employment_record_display_type").on('change', function() {
        $("#myForm").parsley().destroy();
        if ( $(this).val() == '8888' || $(this).val() == '9999' ) {
            $('#id_employment_record_position_title').removeAttr('data-parsley-maxlength');
            $('#id_employment_record_position_title').prop('disabled', true);
        } else {
            $('#id_employment_record_position_title').attr('data-parsley-maxlength', '150');
            $('#id_employment_record_position_title').prop('disabled', false);
        }

        $("#myForm").parsley();
    });

    $("#myForm").submit(function() {
        $(this).parsley().validate();
        // when there are no client side errors when the form is submitted
        if ($(this).parsley().isValid()) {
            console.log('no client side errors!');
        } else {
            console.log('form is not valid');
        }
        event.preventDefault();
    });
});
</script>

您还可以检查this working jsfiddle