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;
},

Euphonium

Not sure what you're trying to accomplish here. If you want to remove just the error, you can use window.ParsleyUI.removeError($("input[name=fieldName]").parsley(), 'required'); (see docs). If you want to remove the validation from that field altogether check this answer. – Dux

@milz your comment was a tremendous help. the window.ParsleyUI.removeError($("input[name=fieldName]").parsley(), 'required'); does remove the error message, but leaves the parsley-error. However, thanks to your link I was able to find $('#FieldToBeValidated').parsley().reset(); which resolved the issue, by reseting the parsley status on the field. If you answer the question including this solution in an example I will accept the answer. Thanks! – Euphonium

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>

Keratin