Why Meteor validation rules do not work on a textarea input?

Question

I have a form with validation upon its submission, including the following:

Template.reportEdit.onRendered(function () {
  $('#projectform').validate({
    rules: {
      serverName: {
        required: true
      },
....
  messages: {
      serverName: {
        required: 'Enter the server name!'
      },

and HTML:

<dt>
  <label for='serverName'>Server:</label>
</dt>
<dd>
<select id='serverName' name='serverName' autocomplete='off'>
//logic loading its values
</select>
<div>
  <label id="serverName-error" class="error" for="serverName"></label>
</div>
</dd>

However, when I change the input to textarea, as I need a freetext to be entered, the validation stops working and no message is shown.

Answer 1

In Blaze onRendered runs only once after the first/initial render of the specific Template instance.

If you want to validate free text input you should use Template.events and a throttled input:

<template name="reportEdit">
  <form id="projectform">
    <textarea id="text-input" rows="5"></textarea>
    ...
  </form>
</template>

function throttle(func, timeFrame) {
  var lastTime = 0;
  return function (...args) {
      var now = new Date();
      if (now - lastTime >= timeFrame) {
          func(...args);
          lastTime = now;
      }
  };
}

Template.reportEdit.events({
  'input #text-input': throttle(function () {
    $('#projectform').validate({ ... })
  }, 300)
})

Sources

https://www.blazejs.org/api/templates.html#Template-onRendered

https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_throttle