Schema validation errors not showing in AutoForm


#1

Based on the AutoForm and Collection2 documentation, I’m under the impression that schema validation errors should be shown to the user automatically by AutoForm (error message plus highlight the bad field.) This isn’t happening for me. I get no user feedback at all. Defining an onError handler with an alert works but is pretty crude from a UI perspective.

Am I doing something wrong or am I just under a false impression?

I have the following form built with AutoForm to update some custom values in Meteor.users. I’m using afQuickFields rather than QuickForm because I want a different layout than QuickForm provides.

.html

<template name="updateProfileForm">
    {{#autoForm id="updateProfileForm" collection="Meteor.users" doc=currentUser type="update"}}
   <div class='row'>
    <div class='col-md-4'>
      {{> afQuickField name="wraithnotes.firstName" label='First Name'}}
    </div>
  </div>
  <div class='row'>
    <div class='col-md-4'>
      {{> afQuickField name="wraithnotes.lastName" label='Last Name'}}
    </div>
  </div>
  <div class="row">
     <div class="col-md-2">
       {{> afQuickField name="wraithnotes.POLInterval" label="POL Interval (days)"}}
   </div>
  </div>
  <div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-default">Reset</button>
  </div>
   {{/autoForm}}
 </template>

schema.js

Schemas.wraithnotes = new SimpleSchema({
    POLInterval: {
        type: SimpleSchema.Integer,
        min: 10,
        max: 999,
        optional: true
    },
    firstName: {
        type: String,
        regEx: /^[a-zA-Z-]{2,25}$/,
        optional: true,
    },
    lastName: {
        type: String,
        regEx: /^[a-zA-Z]{2,25}$/,
        optional: true,
    },
 });

.js

AutoForm.hooks({
  updateProfileForm: {
    onError: function(formType, error) {
      alert(error.message);
      console.log("onError:", error.message, "formType:", formType);
      console.log("validation context:", AutoForm.getValidationContext(this.formId));
    }
  }
});

If I submit the form with a bad value (setting POLInterval to 9999 for instance) the onError function is called and an alert pops up. but the field isn’t hightlighted and no error is displayed on the form.


#2

Have another look at the docs for the collection and schema options.

Also, give this a shot:

  1. Add a schema option to the autoForm and set it to Schemas.wraithnotes.
  2. Do away with the dotted field references, e.g. firstName instead of wraithnotes.firstName.

#3

Thanks for the suggestions @mattl but…

  1. I don’t need a schema option because Schemas.wraithnotes is attached to the Meteor.users collection. Adding a schema option (or replacing collection with one) causes AutoForm to throw internal errors.

  2. My bad attempt at simplifying my code for the post. In reality wratihnotes is part of Meteor.users (which is the collection I passed in) so the dotted notations are correct. The form displays correctly and updates correctly if none of the fields are in error. Only the display of error messages is “broken”. If anyone thinks that the problem lies in the schema I can post the entire thing instead, but I don’t think the problem is there since display and update work fine.


#4

I see. I thought that you might be attempting to override the collection schema. It’s hard to say what the issue is without seeing all of the code but, typically, these types issues are easy to resolve once the source of the problem is found.


#5

Yeah, I’m probably either not doing something I should or just doing
something stupid. I’m going to try extracting the pertinent code into a
new project to see if I can reproduce the problem with a smaller code
base. I’ll follow up with results.


#6

Sorry for digging but any followup? This looks like similar problem to mine - I can’t get my quickFields to display error message under them event though validation works fine and after submitting form with obvious errors the first control with error gets focus.


#7

Make sure you put {tracker: Tracker} at the end

Schemas.wraithnotes = new SimpleSchema({
    POLInterval: {
        type: SimpleSchema.Integer,
        min: 10,
        max: 999,
        optional: true
    },
    firstName: {
        type: String,
        regEx: /^[a-zA-Z-]{2,25}$/,
        optional: true,
    },
    lastName: {
        type: String,
        regEx: /^[a-zA-Z]{2,25}$/,
        optional: true,
    },
 }, {tracker: Tracker});

#8

Adding that to the schema makes no difference. Still no error message.


#9

A year later, same problem for me… have you a solution plz .?


#10

I never solved the problem, I moved on to writing code for new features instead. But it is probably time to loop back around and see if I can figure it out. I’ll take a stab at it this week once I get the 1.7 changes made. I’m on Windows 10, so Meteor is broken for me without the symlink fix which is in 1.7-rc.11.


#11

Adding that tracker thing fixed it for me. My schema is not database backed - although I doubt that is relevant.