Grimoire examples

Perhaps you want to collect the email addresses of all new users, but only if they explicitly want your spam.

Code for example 1

var Example1 = new Grimoire(
  document.getElementById('example_1')
);
var newUserCheck = document.getElementById('is_new_user');
var noSpamCheck = document.getElementById('no_spam');

// Create a rule for collecting an email address
// when a new user wants spam
var emailRule = Example1.whenChecked(newUserCheck)
  .whenUnchecked(noSpamCheck);
emailRule.reveal(document.getElementById('email_field'));

// We can build on top of emailRule:
// Show the "Thank you" message when we collect the user's
// email, and the value is a valid address
emailRule.whenValue('email', function(val) {
    return !!val.match(/^[^@]{2,}@[^@]{2,}\.[^@]{2,}$/);
  }).reveal(document.getElementById('thanks'));

Sometimes, inputs are only relevant when users make certain selections. Selecting “other” might need further details.

What is your relation?

Code for example 2

var Example2 = new Grimoire(
  document.getElementById('example_2')
);

// Show the explanation field when the user selects "other"
Example2.whenValue('relationship', 'other')
  .reveal(document.getElementById('other_context'));