TableEditor – add, but with validation


Topic: TableEditor – add, but with validation

joelgrondrup asked 3 years ago

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();

    }

});

});


Dawid Wajszczuk staff answered 3 years ago

Hi.

I'm not quite sure what you are trying to accomplish. Are you trying to prevent removing or rather adding row when there is no email? Either way, currently it is not possible to prevent event from further execution, so validation can't be done. I have added proper task for this.

Keep coding,
Dawid


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: Macbook
  • Browser: Chrome
  • OS: OSX 12.0.1
  • Provided sample code: No
  • Provided link: No