How to implement a unique value validator in Foundation 6 and Abide?

I’m new to JS, jQuery, Foundation, Abide. (I speak a little bit PHP.)

I’m trying to implement a uniqueValidator in Abide. When I try to follow the documentation that says:

Just add foundation.abide.js AFTER the foundation.js file.

When I do so, the console says: foundation.abide.js is not found. After long search I find at https://cdnjs.com/libraries/foundation a link only to foundation.abide.min.js

Is the documentation wrong, or do we need foundation.abide.js at all?

I have managed to implement a unique validator using an alert, but I would like to show the error message the way the normal Abide validation shows, directly at the fields.

I have tried it in many different ways, unfortunately none of them seems to be working.

So there is a simple form with some fields, and with a button we can clone the row, and we have more item fields. I want to make sure that no item field has the same value as another, and in case, show the Abide error at the fields themselves.

My last try:

<script>
function uniqueItemValidator($el, required, parent) {
    let newItemValue = $el.val();
    let isUnique = true;

    $('.item').not($el).each(function() {
        if ($(this).val() === newItemValue) {
            isUnique = false;
        }
    });
}

$(document).foundation();
...

$('#form').on('submit', function (event) {
    ...
    $('.item').foundation('uniqueItemValidator', $el, required, parent);
    ...
});
<script>

and the console says:

Uncaught TypeError: _this7.options.validator[v] is not a function

and that leads to endless depths of the net.

You need to sign in to view this answers