[Solved] Help on guide | Implementing validation with mdg:validate-method | Display the validation error

help
1

Hello Dear Meteor Community,

I’m currently implementing the mdg:validate-method. I follow the guide here:

. But the error message on my form is not displayed.

I get the following error on the browser console:

Exception in template helper: TypeError: Cannot read property 'get' of undefined
    at Object.errors (http://localhost:3000/app/app.js?hash=62b2e22a28c453683fa3730e6590762d94394b41:97:27)
    at http://localhost:3000/packages/blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:3051:16
    at http://localhost:3000/packages/blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:1715:16
    at http://localhost:3000/packages/blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:3103:66
    at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:3744:12)
    at http://localhost:3000/packages/blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:3102:27
    at Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=ebf9381e7fc625d41acb0df14995b7614360858a:172:18)
    at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?hash=ebf9381e7fc625d41acb0df14995b7614360858a:106:25)
    at Object.Spacebars.dataMustache (http://localhost:3000/packages/spacebars.js?hash=ebf9381e7fc625d41acb0df14995b7614360858a:138:39)
    at Template.Invoices_newInvoice.HTML.FORM.HTML.DIV.Blaze.Each.HTML.DIV.class (http://localhost:3000/app/app.js?hash=62b2e22a28c453683fa3730e6590762d94394b41:31:28)

I guess the error comes from

Template.Invoices_newInvoice.helpers({
    errors(fieldName) {
        return this.errors.get(fieldName);
    }
});

Here are my relevant files:

imports/ui/invoice-new-invoice.js

import { Template } from 'meteor/templating';

import { insert } from '../api/invoice.js';
import './invoice-new-invoice.html';

Template.Invoices_newInvoice.onCreated(function() {
    this.errors = new ReactiveDict();
});
Template.Invoices_newInvoice.helpers({
    errors(fieldName) {
        return this.errors.get(fieldName);
    }
});
Template.Invoices_newInvoice.events({
    'submit .Invoices_newInvoice'(event, instance) {

        event.preventDefault();
        const data = {
            email: event.target.email.value,
            description: event.target.description.value,
            amount: event.target.amount.value
        };


        insert.call(data, (err, res) => {
            if (err) {
                if (err.error === 'validation-error') {
                    // Initialize error object
                    const errors = {
                        email: [],
                        description: [],
                        amount: []
                    };
                    // Go through validation errors returned from Method
                    err.details.forEach((fieldError) => {
                        // XXX i18n
                        errors[fieldError.name].push(fieldError.type);
                    });
                    // Update ReactiveDict, errors will show up in the UI
                    instance.errors.set(errors);
                }
            }
        });
    }
});

imports/api/invoice.js

import {Meteor} from 'meteor/meteor';

import {ValidatedMethod} from 'meteor/mdg:validated-method';

import {SimpleSchema} from 'meteor/aldeed:simple-schema';

// This Method encodes the form validation requirements.
// By defining them in the Method, we do client and server-side
// validation in one place.
export const insert = new ValidatedMethod({
    name: 'Invoices.methods.insert',
    validate: new SimpleSchema({
        email: {type: String, regEx: SimpleSchema.RegEx.Email},
        description: {type: String, min: 5},
        amount: {type: String}
    }).validator(),
    run(newInvoice) {


       
        console.log('SUCCESS: Invoice insert: ', newInvoice)
    }
});

I made a small project where I was able to reproduce the error:

Best Regards
Sebastian

2

Your help should look like this:

Template.Invoices_newInvoice.helpers({
    errors(fieldName) {
        return Template.instance().errors.get(fieldName);
    }
});

The this keyword in a template helper is not the templace instance’s this.

1 Like
3

Thanks :slight_smile:

works.

Made a pull request on the guide

1 Like