javascriptvalidationmeteormeteor-blaze

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


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.


Solution

  • 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