Displaying Error on client

I am trying to create a user with Account.createUser but am finding it a bit difficult displaying the error on browser. here is my events codes and html codes respectively.

Template.register.events({
    'submit form': function (event) {
        event.preventDefault();
        var user = {
            email: $('[name=email]').val(),
            password: $('[name=password]').val(),
        }
        Accounts.createUser(user, function (error) {
            if (error) {
                var message = error.reason;
                template.find('#error').html(message);
            }
        });

    },
});

<template name="register">
<div class="ui column centered grid container">
    <div class="row">
        <form class="ui form" id="register">
            <div class="">
                <div class="field">
                    <label>Email Address</label>
                    <input placeholder="Email" type="email" name="email">
                </div>
                <div class="field">
                    <label>Password</label>
                    <input placeholder="password" type="text" name="password">
                </div>
                <div class="field">
                    <label>confirm password</label>
                    <input placeholder="Confirm password" type="text" name="retypepassword">
                </div>
            </div>
            <div class="ui blue submit button" id="submit" value="register">Submit</div>
            <div class="ui error message" id="error"></div>
        </form>
    </div>
</div>

I get this error on my console

Exception in delivering result of invoking 'createUser': ReferenceError: template is not defined

How can I fix this?

This coming from:

template.find('#error').html(message);

Where you are referring to an undeclared object (template).

You need to amend the event to:

Template.register.events({
    'submit form': function (event, template) {
1 Like

Tried it but a new error showed up.

Exception in delivering result of invoking 'createUser': TypeError: template.find(...).html is not a function

That’s because find returns a DOM element, not a jQuery object. If you want to use jQuery, you can do:

template.$('#error').html(message);
1 Like

Well no error returned on the console but error.reason did not display as expected.

I suggest adding a console.log(error) right before the var message = error.reason; line to see what’s actually coming back.

I already did that with alert('message'). it pops up the error as expected. However, when I try to display the error in a nicely formatted way, I get stuck.

Ok. Well, you should really be doing this with Meteor rather than jQuery :wink:. Make use of template helpers and reactive data.

template

<template name="register">
<div class="ui column centered grid container">
    <div class="row">
        <form class="ui form" id="register">
            <div class="">
                <div class="field">
                    <label>Email Address</label>
                    <input placeholder="Email" type="email" name="email">
                </div>
                <div class="field">
                    <label>Password</label>
                    <input placeholder="password" type="text" name="password">
                </div>
                <div class="field">
                    <label>confirm password</label>
                    <input placeholder="Confirm password" type="text" name="retypepassword">
                </div>
            </div>
            <div class="ui blue submit button" id="submit" value="register">Submit</div>
            {{#if errorMessage}}
              <div class="ui error message">{{errorMessage}}</div>
            {{/if}}
        </form>
    </div>
</div>
</template>

Template.onCreated:

Template.register.onCreated(function() {
  this.lastError = new ReactiveVar(null);
});

Template.helpers:

Template.register.helpers({
  errorMessage: function() {
    return Template.instance().lastError.get();
  }
});

Template.events:

Template.register.events({
    'submit form': function (event, template) {
        event.preventDefault();
        var user = {
            email: $('[name=email]').val(),
            password: $('[name=password]').val(),
        }
        Accounts.createUser(user, function (error) {
            if (error) {
              template.lastError.set(error.reason);
            } else {
              template.lastError.set(null);
            }
        });
    },
});

Something along those lines, anyway. I haven’t sanity checked it, but it should work :wink:.

You will also need to meteor add reactive-var to your project.

1 Like

For some reason I don’t know, This doesn’t work and show nothing on the console :sweat_smile:

So, I’ve copied my code (above) into a new Meteor application and it works as expected.

What packages have you installed (meteor list)?

accounts-base                        1.2.0  A user account system
accounts-facebook                    1.0.4  Login service for Facebook a...
accounts-password                    1.1.1  Password support for accounts
aldeed:autoform                      5.4.0* Easily create forms with aut...
aldeed:collection2                   2.3.3* Automatic validation of inse...
autopublish                          1.0.3  Publish the entire database ...
email                                1.0.6  Send email messages
flemay:less-autoprefixer             1.1.0  The dynamic stylesheet langu...
insecure                             1.0.3  Allow all database writes by...
iron:router                          1.0.9  Routing specifically designe...
meteor-platform                      1.2.2  Include a standard set of Me...
reactive-var                         1.0.5  Reactive variable
sarasate:semantic-ui-datetimepicker  0.0.2  Semantic UI DateTime picker ...
semantic:ui                          2.0.7* Official Semantic UI Integra...

Well, now I’m struggling. I’ve added those packages that were missing into my app and it still works. That leaves two possibilities as far as I can see.

  1. Other parts of your codebase which you haven’t shared are clobbering something and/or
  2. My package versions are ahead of yours. You could try meteor update but that’s clutching at straws IMO.

I couldn’t figure this out. I just went ahead to use accounts-ui package for semantic-ui. It works well for now. Thank your for your response.

You’re welcome. I’m pleased you found a solution which works. :smile:

1 Like

Hi @robfallows, do you think I could accomplish something similar with a react template?

I’ve tried callbacks and whatnot. I’ve had no luck so far