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');

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

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 代码（我已经在上面注释掉了）？

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

Answer 1

Parsley 是一个 Javascript 库，其工作原理如下：

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

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

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

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

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

<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