Async JS validation issues for html textarea

Question

I'm trying to replicate the code in this article: https://depth-first.com/articles/2020/08/24/smiles-validation-in-the-browser/

What I'm trying to do different is that I'm using a textarea instead of input to take multi-line input. In addition to displaying an error message, I also want to display the entry which doesn't pass the validation.

The original validation script is this:

const path = '/target/wasm32-unknown-unknown/release/smival.wasm';

const read_smiles = instance => {
  return smiles => {
    const encoder = new TextEncoder();
    const encoded = encoder.encode(`${smiles}\0`);
    const length = encoded.length;
    const pString = instance.exports.alloc(length);
    const view = new Uint8Array(
      instance.exports.memory.buffer, pString, length
    );

    view.set(encoded);

    return instance.exports.read_smiles(pString);
  };
};

const watch = instance => {
  const read = read_smiles(instance);

  document.querySelector('input').addEventListener('input', e => {
    const { target } = e;

    if (read(target.value) === 0) {
      target.classList.remove('invalid');
    } else {
      target.classList.add('invalid');
    }
  });
}

(async () => {
  const response = await fetch(path);
  const bytes = await response.arrayBuffer();
  const wasm = await WebAssembly.instantiate(bytes, { });

  watch(wasm.instance);
})();

For working with a textarea, I've changed the watch function to this and added a <p id="indicator"> element to the html to display an error:

const watch = instance => {
  const read = read_smiles(instance);

  document.querySelector("textarea").addEventListener('input', e => {
    const { target } = e;

    var lines_array = target.value.split('/n');

    var p = document.getElementById("indicator");
    p.style.display = "block";
    p.innerHTML = "The size of the input is : " + lines_array.length;

    if (read(target.value) === 0) {
      target.classList.remove('invalid');
    } else {
      target.classList.add('invalid');
    }
  });
}

I'm not even able to get a count of entries that fail the validation. I believe this is async js and I'm just a beginner in JavaScript so it's hard to follow what is happening here, especially the part where the function e is referencing itself.

document.querySelector("textarea").addEventListener('input', e => {
    const { target } = e;

Can someone please help me in understanding this complicated code and figuring out how to get a count of entries that fail the validation and also printing the string/index of the same for helping the user?

Alex · Accepted Answer · 2022-02-26 02:47:10Z

0

There is a mistake in you code to count entries in the textarea:

var lines_array = target.value.split('\n'); // replace /n with \n

You are asking about the function e is referencing itself: The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. You can find more informations Mdn web docs - Destructuring object

answered Feb 26, 2022 at 2:47

Alex

1437 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Async JS validation issues for html textarea

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related