Meteor autoform form is undefined

Question

I am trying to use a quickform to do method-update but whenever I type and submit the following errors appear in the console.

Uncaught TypeError: Cannot read property 'validation' of undefined
Uncaught TypeError: Cannot read property 'autosave' of undefined
Uncaught TypeError: Cannot read property 'type' of undefined

{{#quickForm id="archiveIssue" type="method-update" meteormethod="editIssue" collection=collection doc=doc autocomplete="off"}}
  {{> afQuickField name='Notes'}}
{{/quickForm}}

The helper function to retrieve the collection.

Template.archiveIssue.helpers({
  doc: function () {
    return Session.get("archiveDoc");
  },
  collection: function () {
    return Collections.Issues;
  }
});

The problems do not come from the meteor method, the method never actually gets called. They started appearing after updating the autoform package -> https://github.com/aldeed/meteor-autoform/blob/master/CHANGELOG.md

The Cannot read property 'validation' of undefined appears on keyup for everything typed. The other 2 appear when I attempt to submit.

Methods

if (Meteor.isServer){
  Meteor.methods({
    newIssue: function(doc) {
      check(doc, Schema.Issues);
      Collections.Issues.insert({
        User: Meteor.user()._id,
        Description: doc.Description,
        createdAt: new Date,
        Archived: {
          "Archived": false,
          "User": null,
          "Notes": null
        },
      });
    },
    editIssue: function(modifier, docId) {
      console.log('editIssue called; modifier = ' + JSON.stringify(modifier, null, 4) + '; docId = ' + docId);
      check(modifier, Schema.Issues);
      Collections.Issues.update({
          "_id": docId
        },
        modifier
      );
    },
  });
}

Schema

Collections.Issues = new Mongo.Collection('issues');

Schema.Issues = new SimpleSchema({
  Description: {
    type: String,
    max: 500,
    optional: true
  },
  User: {
    type: String,
    label: "User",
    optional: true
  },
  Notes: {
    type: String,
    label: "Notes",
    optional: true
  },
  Archived: {
    type: Object,
    optional: true
  },
  "Archived.Archived": {
    type: Boolean,
    optional: true
  },
  "Archived.User": {
    type: String,
    max: 50,
    label: "Archiving User",
    optional: true
  }, 
  "Archived.Notes": {
    type: String,
    label: "Notes",
    optional: true
  }
});

Collections.Issues.attachSchema(Schema.Issues);

Templates

<template name="issues">
    <div style="width:90%">
        <h1><i class="fa fa-exclamation-triangle"> Issues</i></h1>
      <h2> Active </h2>
        {{> issueModal}}
        {{> tabular table=TabTables.Issues selector=Active_Selector class="table table-striped table-bordered table-condensed" width="100%"}}
      <h2> Archived </h2>
        {{> tabular table=TabTables.Issues_Archived selector=Archive_Selector class="table table-striped table-bordered table-condensed" width="100%"}}      
    </div>
</template>

<template name="issueModal">
    <div class="modal fade" id="insertIssueModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">New Issue</h4>
          </div>
          <div class="modal-body">
            <p>{{> insertIssue}}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="addButton"><button type="button" class="btn btn-success" data-toggle="modal" data-target="#insertIssueModal"><i class="fa fa-plus-square fa-lg"> Add Issue</i></button></div>
</template>

<template name="insertIssue">
  {{#quickForm id="insertIssue" type="method" meteormethod="newIssue" collection=collection validation="keyup" fields="Description" omit="User,Archived.Archived,Archived.User,Archived.Notes" autocomplete="off"}}
  {{/quickForm}}
</template>

<template name="archiveIssueModal">
    <div class="modal fade" id="archiveIssue" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" >
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title" ><i class="fa fa-archive"> Archive Issue</i></h4>
          </div>
          <div class="modal-body">
            <p>{{> archiveIssue}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="archiveButton" style="margin: auto 0;" align="center">
      <button id="archiveButton" type="button" class="btn btn-xs btn-info" data-toggle="modal" data-target="#archiveIssue"><i class="fa fa-archive"> Archive</i></button>
    </div>
</template>

<template name="archiveIssue">
  <div align="left">
    {{#quickForm id="archiveIssue" type="method-update" meteormethod="editIssue" collection=collection doc=doc autocomplete="off"}}
      {{> afQuickField name='Notes'}}
    {{/quickForm}}
  </div>
</template>

Archive doc is set from a helper

Template.archiveIssueModal.events({
  "click .archiveButton": function (event) {
    Session.set("archiveDoc", this);
  }
});

You said the errors are coming when you submit. Does that mean they're coming from the editIssue method? Can you show the code? You're not really giving enough information to get help. See: stackoverflow.com/help/mcve — Mark Leiber
It's hard to provide help without seeing more of your code. Here is a working example based on what you've shown so far: github.com/markleiber/so_31791792 — Mark Leiber
After playing with your example and checking package versions against yours I'm still not sure whats wrong with mine. Could it be that another package included is causing this problem? — Nighthawk

Almaju Almaju · Accepted Answer · 2016-01-28T02:07:05

I just got this exact problem and the issue was that I had another HTML tag with the very same ID than my form.

Changing either the HTML tag ID or the form ID resolved the issue. :)

Meteor autoform form is undefined

1 Answers