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:autoform@6.2.0, "simpl-schema": "^0.3.2"

Styx · Accepted Answer · 2017-10-13T10:22:08.700

0

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.

edited Oct 13 '17 at 10:22

answered Oct 12 '17 at 14:17

Styx

9,863
8
43
53

Still it does not work. page hangs on. no error on server or client. – Ankur Soni Oct 12 '17 at 14:30
@AnkurSoni What do you mean by "page hangs on"? UI is unresponsive? – Styx Oct 12 '17 at 14:38
I mean No action happens, Form is normal, i.e. I can still put correct entries and it works. But when I put wrong dates, no action happens. – Ankur Soni Oct 12 '17 at 14:41
@AnkurSoni Could you show you template? Because the code from my answer is working, I tested it on my local (without `autoform` though) by using `AppointmentsSchema.validate(...)`. – Styx Oct 12 '17 at 16:08
@AnkurSoni Just tested with your HTML (clean up), it works: [Screenshot](https://d3vv6lp55qjaqc.cloudfront.net/items/2h0O1t0v451P3e1X0334/Screen%20Shot%202017-10-13%20at%2010.49.15%20AM.png). – Styx Oct 13 '17 at 07:50
@AnkurSoni Are you sure you've imported schema definition for both client and server? – Styx Oct 13 '17 at 07:51
I write all my schema code in `project/imports/api`..... everything works till now considering UI validation, only the case that custom stuff is not working :( – Ankur Soni Oct 13 '17 at 08:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156638/discussion-between-styx-and-ankur-soni). – Styx Oct 13 '17 at 09:33

SimpleSchema custom error messages in autoform 6.2.0 not working

1 Answers1