Meteor.js Validation w/ Mesosphere

Question

I'm trying to implement Mesosphere for validation into my meteor app but it seems like Mesosphere isn't picking up on some of the native validations I've listed.

I tried just a single validation for formatting of email and it's required length. For example:

Mesosphere({
    name: 'signupForm',
    method: 'signupUser',
    fields: {
        email: {
            required: true,
            format: 'email',
            rules: {
                exactLength: 4
            },
            message: 'Wrong length'
        }
    },
    onFailure: function (errors) {
        messages = [];

        messages = _.map(errors, function (val, err) {
            console.log(val.message);
        });
    },
    onSuccess: function (data) {
        alert("Totally worked!")
    }
});

The 'onFailure' (and onSuccess) callback seems to work because it is logging something when I submit the form. Which makes me believe I have it set up properly on the form submit event too. There you pass the form object to Mesosphere to create the validationObject if I understand it correctly. For example:

var validationObject = Mesosphere.signupForm.validate(accountData);

Once submitted, it's logging Field Required as the error which is weird because I did type something into the field. It makes no mention of an incorrect length or format. It skips the 'Wrong Length' message and I can't find that message in the object anywhere.

So my question is what am I doing wrong to not be getting the proper message for the incorrect input for that form field? Thanks : )

Also, willing to take recommendations on other validation packages. Mesosphere leverages Meteor's server/client features for validation so it seemed like a good place to start.

Template:

<template name="signup">
      <form name="signupForm" id="signup-form" class="panel" action="#">
        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" name="email" id="email" class="form-control" />
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" name="password" id="password" class="form-control" />
        </div>

        <div class="form-group">
          <input type="submit" value="Sign Up" id="create-account" class="btn btn-success pull-right">
        </div>
      </form> </template>

Which calls this method in the corresponding file:

  signupUser: function(accountData) {
    var uid = Accounts.createUser(accountData);
  }

Answer 1

So basically what I see here is that your rules don't reflect how the form would be validated. You have an email that must match the email format, but then you have a rule that says it has to be exactly 4 characters long.. a better field definition would look like this:

fields: {
    email: {
        required: true,
        format: 'email',
        message: 'Please enter a valid email address'
    },
    password: {
        required: true,
        rules: {
            minLength: 6,
            maxLength: 30,
        },
        message: "Password must be between 6 and 30 characters"
    }
}

I created a github repo that you can clone and run to test this out if you would like.

https://github.com/copleykj/meso-test

Hope this helps.