Iterate through textarea fields under a specific class to strip emojis from a textarea field whose name has Gift Message as substring

Question

I'm looking only for a pure JavaScript solution to the problem I'm trying to fix with the code and the logic below. I'm stuck being unable to get the value of the textarea field whose name contains Gift Message as a substring of its name. Could you please help fix this?

The HTML is as follows:

<span class="bold_option_element">
    <textarea name="properties[Enter Gift Message Below. NO EMOJIS PLEASE. Remember to sign your name! ]" class="ta_570739_262324" maxlength="1000">
    </textarea>
  <textarea name="properties[Test Gift ]" class="ta_570739_262324" maxlength="1000">
    </textarea>
</span>

JavaScript:

<script>
    {%- comment -%}
        This block of code checks if emojis are present in gift message, on keyup event
        Logic:
        1. Get value of textarea field for gift message.
        2. Get the textarea "bold_option_element" fields whose name has "GiftMessage" after stripping all blanks.
        3. Return false if emojis are present.
        Refer: https://melvingeorge.me/blog/check-if-string-contain-emojis-javascript for emoji validation
    {%- endcomment -%}
    window.onkeyup = function(e) {
        // Get gift message string.
        giftMessage = "Hello 😃 😄";
        let textAreaElements = document.getElementsByClassName('bold_option_element');
        console.log(textAreaElements);
        const regexExp = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/gi;
        if (regexExp.test(giftMessage)) {
            alert("No EMOJIs are allowed in the Gift Message. EMOJIs have been deleted in the Gift Messsage. Edit your Gift Message and 'Add to Cart'");
            return false;
        }
        return true;    
    };
</script>

Link to jsfiddle: https://jsfiddle.net/pramodraam/vhqyj15m/6/

Answer 1

Move your selector outside of the keyup handler. Use addEventListener rather than onkeyup

The selector for your text areas with Gift Message in the name attribute is:

".bold_option_element > textarea[name*='Gift Message']"

I used it in .querySelectorAll() as you'll see below.

Finally, since this is async, returning a value from an event listener is a noop. You'll need to use that Boolean within the handler itself as demonstrated below.

Code is commented.

// Get only the textareas with "Gift Message" in name attribute
let textAreaElements = document.querySelectorAll(".bold_option_element > textarea[name*='Gift Message']");

// Add event listener to each textarea with "Gift Message" in name attribute
textAreaElements.forEach(element => {
  element.addEventListener('keyup', checkForEmoji);

});
// keyup event handler to check for emoji
function checkForEmoji(e) {
  // Stores result of async Operation
  let result = true;

  const regexExp = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/gi;
  if (regexExp.test(e.target.value)) {
    alert("No EMOJIs are allowed in the Gift Message. EMOJIs have been deleted in the Gift Messsage. Edit your Gift Message and 'Add to Cart'");

    // EDIT: Added code to remove emoji
    e.target.value = e.target.value.replaceAll(regexExp, '');

    result = false;
  }
  // Do something with result here
  console.log(result);
};

<span class="bold_option_element">
  <textarea name="properties[Enter Gift Message Below. NO EMOJIS PLEASE. Remember to sign your name! ]" class="ta_570739_262324" maxlength="1000"></textarea>
  <textarea name="properties[Test Gift ]" class="ta_570739_262324" maxlength="1000"></textarea>
</span>