parsley.js - disable the maxlength validation

Question

I am trying to dynamically disable the parsley.js max length on several of my input fields when the user makes a selection on a select list on the form.

I have read this thread, but when I put the code into my field, the parsley is not triggered, instead the form submits, and I do not understand why.

I have read the parsley.js docs, but I am unable to see why the parsley.js validation is ignored when i add the following line of code:

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

or

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

This is my code to dynamically turm the parsley validation on and off when the user changes the select list on the form:

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

    }

}

Why do I have have to add the destroy & create parsley code on the form (I have commented them out above)?

Would it be better to write a custom validation for this? If so, how would I do that, b/c my js code skills are not yet good enough?

Answer 1

Parsley is a Javascript library and works something like this:

1. When you render your html form, you specify the needed validations through data attributes.

2. You indicate that the form will be validated by Parsley either with the form attribute data-parsley-validate or via javascript through $("#form").parsley().

When parsley is binded to your form (the second step), an object of the type ParsleyForm will be created containing the constraints for each field.

After the object is created, the html attributes are no longer needed. So, if you change any attribute it will have no impact on the validation since Parsley will verify the constraints of the javascript object. This is why you need to destroy & bind parsley (in order to recreate the parsley instance with the new constraints).

In order to solve your issue, you could do something like this:

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

You can also check this working jsfiddle