自社のヒント&ナレッジ共有

吉田成一
参加者

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

解決

お世話になります。

LIG吉田です。

 

お力をお借りしたくお願い致します。

次のコードをcontact.htmlに埋め込み、Submit時に文言の置換を行おうとしております。

 

 

<script>
  window.addEventListener("message", (event) => {
    if (
      event.data.type === "hsFormCallback" &&
      event.data.eventName === "onFormSubmit"
    ) {
      // 送信時の処理を指定
      let words = document.getElementsByName('TICKET.content')[0].value;
      let NG_WORDS = /アホ|まぬけ|バカ|死ね/g;
      if (NG_WORDS.test(words)) {
        console.log('不適切!');
        let rep_str = words.replace(NG_WORDS, '**');
//         alert('不適切な言葉が含まれております。');
//         document.getElementsByName('TICKET.content')[0].value = rep_str;
        event.data.data[3].value = rep_str;
        document.getElementsByName('TICKET.content')[0].value = rep_str;
      }
    }
  });
</script>

 

 

お察しの通り、チケットを見ると置き換わっておりませんでした・・・

 

せめてonFormSubmittedにてticketidの取得ができれば、API(read -> update)にて更新しようかとhsVarsとか色々調査しましたが、チケットIDらしきものを見つけられず・・・

 

皆様の知見をお借りしたく、よろしくお願いします。

0 いいね!
1件の承認済みベストアンサー
吉田成一
解決策
参加者

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

解決

ありがとうございます。

 

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

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

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>

 

 

 

参考になれば幸いです。

元の投稿で解決策を見る

4件の返信
natsumimori
コミュニティーマネージャー
コミュニティーマネージャー

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

解決

@吉田成一 さん

対応策をシェアいただきありがとうございます^^
もしコード系に明るい方がいらっしゃれば、ぜひコメント・他のアイデア提案などぜひお願いします!

0 いいね!
吉田成一
参加者

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

解決

本当は、エラーメッセージを既存のバリデーション表示領域に出したかった・・・

0 いいね!
natsumimori
コミュニティーマネージャー
コミュニティーマネージャー

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

解決

@吉田成一 さん、コミュニティーへの投稿ありがとうございます。

 

@assi さん、 @Yuta さん、 @Jeq さん>もし何かアイデアやヒントをおもちでしたら吉田さんにご共有いただけないでしょうか?🙏

0 いいね!
吉田成一
解決策
参加者

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

解決

ありがとうございます。

 

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

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

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>

 

 

 

参考になれば幸いです。