Change Parsley validation via Javascript

Add or remove data-parsley-maxlength via javascript on change of another input.

by milz

HTML

<script src="http://parsleyjs.org/dist/parsley.min.js"></script>
<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>

JavaScript

$("#myForm").parsley();

$("#id_employment_record_display_type").on('change', function() {
    $("#myForm").parsley().destroy();
    if ( $(this).val() == '8888' || $(this).val() == '9999' ) {
        //disable the parsley maxlength, when the input field is disabled.
        $('#id_employment_record_position_title').removeAttr('data-parsley-maxlength');
        //disable the input field.
        $('#id_employment_record_position_title').prop('disabled', true);
    } else {
        //change the parsley cs error values for all the required form inputs.
        $('#id_employment_record_position_title').attr('data-parsley-maxlength', '150');
        //enable the input field.
        $('#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();
    		});