お問合せフォームに不適切な文言がある場合は伏せ字に置換えたい

ありがとうございます。

色々調査した結果、フォーム送信後ですと「タイムライン」上に文言が表示されてしまうことがわかりました。

「送信前」に対応する必要があり、次のロジックで対応する結論に至りました。

h1は、フォーム上に事前に設置しております(空だとh1が消えるため、全角スペースをとりあえず入れてます)。

*調査用コードです

*lostfocus時に不適切文字をチェックし、送信をブロックする方式にしています。

<script>
 window.addEventListener('focusout', (event) => {
 if (event.target.name === 'TICKET.content') {
 let words = document.getElementsByName('TICKET.content')[0].value;
 let NG_WORDS = /アホ|まぬけ|バカ|死ね/g;
 const button = document.querySelector(".hs-button");
 const obj = document.getElementsByTagName('h1')[0];
 if (NG_WORDS.test(words)) {
 console.log('不適切!');
// let rep_str = words.replace(NG_WORDS, '**');
// document.getElementsByClassName('hs-button').disabled = true;
// button.style.display ="none";
 button.disabled = true;
 button.style.pointerEvents = "none";
 obj.innerHTML = '<span style="color: #ff0201;">不適切な言葉が入力されております。修正をお願いします。</span>';
// event.target.style.background = 'pink';
// alert('不適切な言葉が含まれております。');
// document.getElementsByName('TICKET.content')[0].value = rep_str;
// event.data.data[3].value = rep_str;
// document.getElementsByName('TICKET.content')[0].value = rep_str;
// document.getElementsByName('TICKET.content')[0] = "";
// return true;
 } else {
// button.style.display ="block";
 button.disabled = false;
 button.style.pointerEvents = "auto";
 obj.innerHTML = '';
// obj.innterHTML = '';
// event.target.style.background = '';
 }
 }
 });
</script>

参考になれば幸いです。