TextArea — проверка Javascript с использованием псевдокласса CSS и регулярного выражения

textarea.addEventListener("input", checkOnServer)

function checkOnServer(ev) {
  var elem = ev.target

  // this of course will use AJAX to query server
  setTimeout(function() {
    elem.classList.add("user-interacted")
    var value = elem.value
    var msg = value.length > 3 ? '' : 'Length must be longer than 3 chars'
    elem.setCustomValidity(msg)
  }, 100)

}

textarea.check_valid.user-interacted:invalid {
  border: 4px dotted red;
}

textarea.check_valid.user-interacted:valid {
  border: 4px solid green;
}

textarea {
  outline: none;
}

<p>let's assume valid is > 3 chars</p>
<textarea id = "textarea" class = "check_valid" cols = "80" rows = "5"></textarea>

// stop the default invalid message from showing
document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
}, true);

document.forms.form01.addEventListener('change', e => {
  let form = e.target.form;
  if (e.target.dataset.name) {
    // set the input to have the same value as the textarea
    form[e.target.dataset.name].value = e.target.value;
    // set class name according to validity
    e.target.classList.add('valid');
    if (!form[e.target.dataset.name].validity.valid) {
      e.target.classList.replace('valid', 'invalid');
    }
  }
});

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  let data = new FormData(e.target);
  console.info(...data);
});

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

textarea.invalid {
  border: 4px dotted red;
}

textarea.valid {
  border: 4px solid green;
}

input:user-invalid {
  border: 4px dotted red;
}

input:user-valid {
  border: 4px solid green;
}

<form name = "form01">
  <input type = "text" name = "other" pattern = ".{2,10}" required>
  <textarea data-name = "longtext" name = ""></textarea>
  <input type = "text" name = "longtext"
    pattern = "[a-zA-Z0-9:\s,\.'&\(\)/\-]{10,550}"
    style = "display:none" required>
  <button type = "submit">Submit</button>
</form>

const textarea = document.querySelector('textarea')

textarea.addEventListener('input', () => {
  const reg = new RegExp(textarea.dataset.pattern, 'gmi');
  textarea.setCustomValidity('');
  if (!reg.test(textarea.value)) {
    textarea.setCustomValidity('Invalid characters in text');
  }
  textarea.reportValidity(); // optional - displays popup
})

textarea {
  height: 2rem;
  padding: 0.5rem;
  border: 4px dotted black;
  outline: none;
}

textarea:valid {
  border-color: green;
}

textarea:invalid {
  border-color: red;
}

textarea:focus::placeholder {
  opacity: 0;
}

<textarea 
  required 
  minlength = "10" 
  maxlength = "500" 
  placeholder = "type some text here"
  data-pattern = "(?<!\n)^[()\w\s]+$(?!\n)">
</textarea>