Hello,

Is there a way to create a custom validation and cancel the submission of the Umbraco form when validation is not met using javascript?

We are trying to filter and disallow the submission if the message content contains a link. The preventDefault() method is not working; Though the "invalid message" is showing the Umbraco form still submits even if the message has a URL in it. Below is the JS code that we are using.

Umbraco Form v13

<script>
document.addEventListener("DOMContentLoaded", () => {
    var message = document.getElementById('4b0fe2bd-2953-47c5-abec-4a858803331232');

    message.addEventListener('keyup', function () {
        var validationMessage = message.nextSibling.nextSibling;
        validationMessage.innerHTML = "";
    });

    var footerForm = document.querySelector('.form-section');

    let form = footerForm.querySelector('form');

    console.log(form);
    let submitBtn = form.querySelector('input[type="submit"]');

    submitBtn.addEventListener("click", function (event) {

        var checkUrl = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
        var checkScript = new RegExp("<.+?>?");

        if (checkUrl.test(message.value)) {
            event.preventDefault();
            var validationMessage = message.nextSibling.nextSibling;
            validationMessage.style.color = "red";
            validationMessage.innerHTML = "Invalid Comment 1";
            return false;
        }

        if (checkScript.test(message.value)) {
            event.preventDefault();
            var validationMessage = message.nextSibling.nextSibling;
            validationMessage.style.color = "red";
            validationMessage.innerHTML = "Invalid Comment 2";
            return false;
        }
    });
});

We also tried this script.

<script>
document.addEventListener("DOMContentLoaded", () => {
    var message = document.getElementById('4b0fe2bd-2953-47c5-abec-4a858803331232');

    message.addEventListener('keyup', function () {
        var validationMessage = message.nextSibling.nextSibling;
        validationMessage.innerHTML = "";
    });

    var footerForm = document.querySelector('.form-section');

    let form = footerForm.querySelector('form');

    console.log(form);

    form.addEventListener("submit", ev => {


        var checkUrl = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
        var checkScript = new RegExp("<.+?>?");

        if (checkUrl.test(comment.value)) {
            var validationMessage = message.nextSibling.nextSibling;
            validationMessage.style.color = "red";
            validationMessage.innerHTML = "Invalid Comment";

            return false;
        }

        if (checkScript.test(comment.value)) {
            var validationMessage = message.nextSibling.nextSibling;
            validationMessage.style.color = "red";
            validationMessage.innerHTML = "Invalid Comment";

            return false;
        }

        form.submit();
    });
});

is working on a reply...