Question

My Parsley error message on the first keyup event when typing into field #myTestFieldis

This value is too short. It should have 4 characters or more.

I tryed to change Parsley field data attributes on the fly, but it seems this doesn’t work. It keeps the value assigned in first place (html form) without taking in account the modified one in the JS code.

On Chrome I can check that the data attribute value is changed after the DOM is loaded.

My code is

<form name="myForm" id="myForm">
    <input type="text" name="myTestField" id="myTestField" data-trigger="keyup" data-minlength="4" data-validation-minlength="0" >
    <button id="mySubmitButton" type="submit" >Save</button>
</form>

<script>
// wait for the DOM to be loaded 
    $(document).ready(function() {
    // destroy
    $('#myForm').parsley('destroy');
    // change attribute
    $('#myTestField').attr('data-minlength','2');
    // assign parsley to do the job
    $('#myForm').parsley();
      });
</script>

I am doing something wrong?

UPDATE:

This is a known issue of Parsley.js and theres a Issue #52 on GitHub

I also tried to use removeItem() followed by addItem() on the same input #Id but didn’t work either.

I’m still trying to figure out a workaround

Answer 1

Parsley is based on data attributes, that are binded by jQuery with .data()

Unfortunately, when you add a data- attr, it is not binded to jQuery .data(). You’ll have to add the validators this way on the fly:

<script>
// wait for the DOM to be loaded 
    $(document).ready(function() {
      // destroy
      $('#myForm').parsley('destroy');
      // change attribute
      $('#myTestField').data('minlength', 2);
      // assign parsley to do the job
      $('#myForm').parsley();
    });
</script>

I’ll add an API to add / edit / remove validators on the fly, without having to call destroy 🙂