Hi guys.

In the Table Editor I'm adding new rows using an ajax request. I'm using the add.mdb.tableEditor event.

But I need to do some validation.

One of the fields in the table view is an e-mail field. If this field is not filled out, the new row shouldn't be removed.

Instead I'm notifiying the user with a toast.

Here's my code.

table.addEventListener('add.mdb.tableEditor', event => {

input.removeAttribute('disabled');

if (!event.row.email){

    $(".page-loader").hide();
    var toastElement = document.getElementById("basic-warning");
    toastElement.querySelector(".toast-header .me-auto").innerHTML = "Fejl!";
    toastElement.querySelector(".toast-body").innerHTML = "Du skal udfylde en e-mail";
    let toast = mdb.Toast.getInstance(toastElement);
    toast.show();

    //How to dismiss the removal of the new row
    //Expected something like this: tableAdvancedSearch.add(event.row); 

     // But I'm just getting this error: Uncaught TypeError: Illegal invocation
    // at Object.find (all.min.js:319)
    // at i.value (all.min.js:319)
    // at i.value (all.min.js:319)
    // at all.min.js:319
    //

    return;

}

var data = event.row;

data["existingClient"] = true;

$.ajax({
    method: "POST",
    url: "createuser",
    data: data
})
.done(function(msg) {

    var obj = JSON.parse(msg);

    if (obj["success"]){

        var toastElement = document.getElementById("basic-success");
        toastElement.querySelector(".toast-header .me-auto").innerHTML = "Bruger oprettet";
        toastElement.querySelector(".toast-body").innerHTML = obj["text"];
        let toast = mdb.Toast.getInstance(toastElement);
        toast.show();

        reloadData();

    }
    else {

        $(".page-loader").hide();
        var toastElement = document.getElementById("basic-failure");
        toastElement.querySelector(".toast-header .me-auto").innerHTML = "Fejl!";
        toastElement.querySelector(".toast-body").innerHTML = obj["text"];
        let toast = mdb.Toast.getInstance(toastElement);
        toast.show();

    }

});

});