CODEWITHSUNDEEP
javascriptdata-bindingmeteor
Henry Cho
Henry Cho

Reputation: 770

Meteor two way data binding for form validation

I read a lot of resources about Blaze allowing reactive rendering for Meteor 0.8, but I can't seem to find a solution for my simple problem below.

I'm trying to validate my form inputs. For the sake of simplicity, lets say that I just want to change my {{message}} when a form is submitted. The approach I have taken in client.js is simply giving a new value to the helper variable. This is the way how I used to work with AngularJS, but there seems to be more than simply changing the variable in Meteor. How would I go about this? 

- index.html
<template name="user">
    <form>
        <input type="text" id="name">
        <p>{{message}}</p>
        <button class="submit" onclick="return false;">Submit</button>
    </form>
</template>

- client.js
Template.user.message = "";
Template.user.events = {
    'click .submit' = function(){
        Template.user.message = "valid";
    }
}

Upvotes: 4

Views: 1202

Answers (1)

David Weldon
David Weldon

Reputation: 64312

It should work if you use a reactive variable. I'll use a session variable in this example: 

Template.user.message = function() {
  return Session.get('userMessage');
};

Template.user.events({
  submit: function() {
    Session.set('userMessage', 'valid');
  }
});

Note that events takes an object (your code is assigning the click handler rather than making a value in an event map).

Upvotes: 1

Related Questions