SimpleSchema custom error messages in autoform 6.2.0 not working

Question

I followed Start Date to be Greater than End Date link. Below is the SimpleSchema code.

import { Mongo } from 'meteor/mongo';
import SimpleSchema from 'simpl-schema';
import MessageBox from 'message-box';

SimpleSchema.extendOptions(['autoform']);

MessageBox.defaults({
  en: {
    startDateMustBeSmaller: "From Date must be greater than to Date"
  }
});

export const Appointments = new Mongo.Collection('Appointments');

Appointments.allow({
  insert: function(userId, doc){ return !!userId; },
  update: function(userId, doc){ return !!userId; },
  remove: function(userId, doc){ return !!userId; }
});

AppointmentsSchema = new SimpleSchema({
  "fromDate": {
    type: Date,
    label: "From Date",
    autoform: {
      afFieldInput: {
        type: "text",
      }
    }
  },
  "toDate": {
    type: Date,
    label: "To Date",
    autoform: {
      afFieldInput: {
        type: "text",
      }
    },
    custom: function() {
      var start = this.field('fromDate');
      var end = this;
      if (start.isSet && end.isSet) {
        if (moment(end.value).isBefore(start.value)) return "startDateMustBeSmaller";
      }
    }
  }
});

Appointments.attachSchema( AppointmentsSchema );

Template.html

{{#autoForm id='insertAppointmentForm' collection=appointment type="insert" doc=this validation="browser"}}
    <fieldset>
      <div class="col-sm-6">
        {{> afQuickField name='clientId' options=clientsSelect2 select2Options=s2Opts}}
      </div>
      <div class="col-sm-6">
        {{> afQuickField name='otherDetails'}}
      </div>
      <div class="col-sm-6">
        {{> afQuickField name='fromDate'}}
      </div>
      <div class="col-sm-6">
        {{> afQuickField name='toDate'}}
      </div>
      <div class="col-sm-6">
        {{> afQuickField name='reason'}}
      </div>
      <div class="col-sm-6">
        {{> afQuickField name='meetingType'}}
      </div>
    </fieldset>
    <div>
        <button type="submit" class="btn btn-sm bg-olive margin">
          <span class="glyphicon glyphicon-ok"></span> Create
        </button>
        <button type="submit" class="btn btn-sm bg-navy margin reset">
          <span class="glyphicon glyphicon-refresh"></span> Reset
        </button>
        <a href="/user/view-appointments" class="btn btn-sm bg-orange margin pull-right" role="button">
          <span class="glyphicon glyphicon-eye-open"></span>
            View Appointments
        </a>
    </div>
{{/autoForm}}

When I try to run with above schema, the form do not get submitted, neither the client or server has error.

I also tried SimpleSchema.messages({}), SimpleSchema.messageBox.messages({}) but I get method not found error.

Problem: I want to check if start date before end date. Above code does not work.

Note: I am using Meteor 1.5.0 with aldeed:[email protected], "simpl-schema": "^0.3.2"

Answer 1

Seeing as you didn't post your Moment.js version, I assume that you do not use it at all, whereas the mentioned answer does.

Your issue is in this line:

if (moment(end.value).isBefore(start.value)) return "startDateMustBeSmaller";

Both your fields values have type of Date, so you can just compare them:

if (end.value <= start.value) {
  return 'startDateMustBeSmaller';
}

Next, the issue with messages: both SimpleSchema.messages and SimpleSchema.prototype.messages have been removed, as it stated in Change Log: 2.0: Other Breaking Changes: Error message changes, but it seems that documentation has not been updated yet.

To customize your error message you should do that like this:

// add this right after AppointmentsSchema definition
AppointmentsSchema.messageBox.messages({
  en: {
    startDateMustBeSmaller: 'To Date must be greater than From Date',
  }
});

Added:

Another critical point is to pass { tracker: Tracker } as options parameter to the new SimpleSchema() constructor to ensure reactivity of error messages.

Source: Change Log: 2.0: Other Breaking Changes:

Reactivity of labels and error messages in client code is no longer automatic. When creating your SimpleSchema instance, pass { tracker: Tracker } in the options to enable Tracker reactivity.