Change fields back to valid after invalidated by parsley

Question

I have the following custom validator. The intended purpose is to validate the field contingent upon the value of the field passed in as 'requirement'.

The 'requirement' field updates onchange of the FieldToBeValidated. In order to prevent the FieldToBeValidated from being invalidated constanly, keyup is turned off.

Once the 'requirement' field is changed, the FieldToBeValidated is not validated until the form is submitted. Consequently the field remains red with the warning box that parsley applies.

How can I change the 'FieldToBeValidated' back to a valid state (removing the red background) after the 'requirement' field updates to be not null or '----'?

 name: 'customvalidatorname',
 fn: function(value, requirement) {
   var nodeList = document.getElementsByName(requirement);

   var nodeArray = [].slice.call(nodeList);
   $('#FieldToBeValidated').off('keyup');
   if(!nodeArray[0].value || nodeArray[0].value === '----'){              
        return false;
   }
   return true;
},

Answer 1

There are two ways that you can use to remote the validation from a specific field. Check the official documentation (see the methods section).

Either you use reset() in that specific field:

$(document).ready(function() {
    $("form").parsley();
    
    $("#reset-validation").on('click', function() {
        $("input[name=field1]").parsley().reset();
        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>

<form>
    <input type="text" name="field1" required />
    <input type="submit" />
    
    <button id="reset-validation" type="button">Reset validation</button>
</form>

Or you can use the destroy() method:

$(document).ready(function() {
    $("form").parsley();
    
    $("#reset-validation").on('click', function() {        
        $("input[name=field1]").parsley().destroy();
        
        $("input[name=field1]").parsley();
        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>

<form>
  <input type="text" name="field1" required />
  <input type="submit" />

  <button id="reset-validation" type="button">Reset validation</button>
</form>