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＆amp;在表单上创建欧芹代码（我已经在上面注释了它们）？

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

Answer 1

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

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

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

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

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

<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

parsley.js - 禁用maxlength验证

1 个答案: