parsley.js-禁用maxlength验证

user3354539 发表于 Dev

用户名

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

我已经阅读了该线程，但是当我将代码放入字段时，不会触发欧芹，而是提交表单，并且我不明白为什么。

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

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

路易斯·克鲁兹

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

呈现html表单时，您可以通过数据属性指定所需的验证。
您表示该表单将由Parsley使用form属性data-parsley-validate或通过javascript通过进行验证$("#form").parsley()。

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

创建对象后，不再需要html属性。因此，如果您更改任何属性，由于Parsley将验证javascript对象的约束，因此对验证没有影响。这就是为什么您需要销毁并绑定欧芹的原因（为了使用新的约束来重新创建欧芹实例）。

为了解决您的问题，您可以执行以下操作：

<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>