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

Question

当用户在表单上的选择列表上进行选择时，我试图在我的几个输入字段中动态禁用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();

    }

}

为什么我必须添加破坏&在表单上创建欧芹代码(我已经将它们注释掉了)？

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

Answer 1

欧芹是一个Javascript库，其工作方式如下所示：

1. 在呈现html表单时，可以通过数据属性指定所需的验证。
2. 您指出，该表单将由欧芹使用form属性data-parsley-validate验证，或者通过javascript通过$("#form").parsley()验证。

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

在创建对象之后，不再需要html属性。因此，如果您更改任何属性，它将不会对验证产生影响，因为欧芹将验证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>

您也可以检查这个工作上的小把戏