js Foundation Abide input form error remains visible after button clicked

Question

I'm using Foundation Abide for an input form validation, specifically I want to check, that the value in the field is non-negative and non-empty, therefore I'm using the following Validator:

function minZeroValidator($el, required, parent) {
        var target = jQuery($el).val();
        if (target==''){
            return false
        }
        if (target >= 0 ) {
            return true;
        } else {
            return false;
        }
    };

However, as can be seen in the minimal example below the input value can not only be changed using the keyboard but also by two buttons (+ and -Buttons) to increase and decrease the value in predefined steps.

<form id="adjust" data-abide>
    <label for="adj-input-1" class="adj-cat">&nbsp;</label>
    <button class="adj-btn dec-adj-btn">-</button>
    <input type="text" class="adj-input" id="adj-input-1" name="adj-input-1" maxlength="6" size="6"
         data-validator="min_zero">
    <button class="adj-btn inc-adj-btn">+</button>
    <div class="small-12 cell">
        <span class="form-error" data-form-error-for="adj-input-1"
                data-form-error-on="min_zero">Please input a positive number</span>
    </div>
</form>

The problem is now that if I use the keyboard to input a negative value, as planned the warning stated in the form-error appears, but if I now use the increase-button and the value gets positive again, the warning does not disappear and instead remains even if another input field is clicked. It only disappears if a in this specific input field a new value is inputed by keyboard. So my question is whether it is possible to trigger the minZeroValidator after the button is clicked and if the number is positive to remove the form-error-field. Possibly something i can put in my event-listener for the button?

Thank you very much in advance :)

Answer 1

Ah nevermind, found it out on my own, is not too difficult, but I leave it here, maybe it can help someone in the future. The (or at least one) solution is just to remove the classes added by Abide, which are 'is-visible' for the warning and 'is-invalid-input' for the input field to get back the original styling. I just added this small code to my event-Listener:

for (let j = 0; j < adj_err_form.length; j++){
    if (input_field.id === 'adj-input-' +(j+1)){
        adj_err_form[j].classList.remove('is-visible');
        }
     }
input_field.classList.remove('is-invalid-input') 

The for-loop is only there because I have three different Input-Fields and need to check, which warning can disappear.