3_13.md

3.13 Collections validation

NB: Read this note - it's important for this task.

So, if you went here to the addTagForm JavaScript function, now you can add definition for the validator:

function addTagForm($collectionHolder, $newLinkLi) {
    // Get the data-prototype explained earlier
    var prototype = $collectionHolder.data('prototype');

    // get the new index
    var index = $collectionHolder.data('index');

    // Replace '__name__' in the prototype's HTML to
    // instead be a number based on how many items we have
    var newForm = prototype.replace(/__name__/g, index);

    // increase the index with one for the next item
    $collectionHolder.data('index', index + 1);

    // Display the form in the page in an li, before the "Add a tag" link li
    var $newFormLi = $('<li></li>').append(newForm);
    $newLinkLi.before($newFormLi);


    // And here we add a validation using jQuery:
    $($collectionHolder).jsFormValidator('addPrototype', index);
    // Or using pure JS:
    FpJsFormValidator.customize($collectionHolder, 'addPrototype', index);
}

Deleting of elements is as simple as adding, e.g. for the addTagFormDeleteLink function:

function addTagFormDeleteLink($tagFormLi) {
    var $removeFormA = $('<a href="#">delete this tag</a>');
    $tagFormLi.append($removeFormA);

    $removeFormA.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();

        // Here you should receive two important variable which are mentioned in the previous function:
        // $collectionHolder - DOM element of collection holder
        // index - the current tag name, e.g. can be matched from id
        $($collectionHolder).jsFormValidator('delPrototype', index);

        // Or using pure JS:
        FpJsFormValidator.customize($collectionHolder, 'delPrototype', index);

        // remove the li for the tag form
        $tagFormLi.remove();
    });
}