Validating Delete form submission event in AJAX

[GlennFL]

This is on a report details page containing both UPDATE and DELETE buttons, I have been unsuccessful in capturing / processing a delete event using the  the new AJAX  processing.

The functional intention is that I have a requirement to verify some data / field values before permitting a record delete.  Before the AJAX release, I could capture Mod0DeleteRecord onclick event and then process using return false if validation failed.

With AJAX on, I can still capture the button click and process a validation (actual code below), but the return false and event.preventDefault does stop the delete event from continuing.  I suppose I could approach this by hiding the delete button altogether until such time that the proper criteria permits deletion but I would prefer to keep the UX as it was before the AJAX update.

document.getElementsByName("Mod0DeleteRecord")[0].addEventListener('click', function(event) {
 event.preventDefault();

if (1==1) {
 alert("validation failed");
 return false;
}
});

I've also tried using the BeforeFormSubmit event handler but was not able to capture the delete click vs the update click hence the delete validation script would validate for update submissions and vice-versa.

I've spent an embarrassing amount of time time trying to figure this out, your help is much appreciated.

Thank you

 

[George43]

I have tested this code with validation. You can adjust validation rules and it will be prevent delete event.

 

<script>
var validation = true;
//// Validation of the Delete Button
if (document.querySelector('input[id^="Mod0DeleteRecord"]')){
    document.querySelector('input[id^="Mod0DeleteRecord"]').addEventListener('mousedown', function(event) {
        if (1==1){
            validation = false; //YOUR Logic for the Delete Validation
        }
    });
}
/////
if (document.querySelector('input[id^="Mod0EditRecord"]')){
    document.querySelector('input[id^="Mod0EditRecord"]').addEventListener('mousedown', function(event) {
        validation = true; //For Working Edit Buttons
    });
}

if (document.querySelector('input[id^="Mod0CancelRecord"]')){
    document.querySelector('input[id^="Mod0CancelRecord"]').addEventListener('mousedown', function(event) {
        validation = true; //For Working Back Buttons
    });
}


document.addEventListener('BeforeFormSubmit', function(event) {
	if (!validation){
        alert('EVENT Prevented'); //Some custom alert.
        event.preventDefault();
    }
});

</script>