³ÉÈËÂÛ̳

Have a play with the form below:

HTML

This is the HTML for the form above:

<form action="example.shtml" id="testForm">
  <p>
    <label for="email">
      <span class="question">Email:</span>
      <input type="text" name="email" id="email" />
    </label>
  </p>
  <p>
    <label for="password">
      <span class="question">Password:</span>
      <input type="password" name="password" id="password" />
    </label>
  </p>
  <p>
    <label for="passwordagain">
      <span class="question">Re-enter Password:</span>
      <input type="password" name="passwordagain" id="passwordagain" />
    </label>
    
  </p>
  <p>
    <label for="age">
      <span class="question">Age:</span>
      <input type="text" name="age" id="age" />
    </label>
  </p>
  <fieldset>
    <legend class="futurefeatures-msgContainer">
      <span class="futurefeatures-prompt">What would you like Glow to do in future?</span> (pick at least two)
    </legend>
    <p>
      <input type="checkbox" name="futurefeatures" id="futurefeatures_timetravel" value="timetravel" />
      <label for="futurefeatures_timetravel">Time travel like that car off of Back To The Future</label>
    </p>
    <p>
      <input type="checkbox" name="futurefeatures" id="futurefeatures_terminator" value="terminator" />
      <label for="futurefeatures_terminator">Go all liquid metally like that bloke off of Terminator 2</label>
    </p>
    <p>
      <input type="checkbox" name="futurefeatures" id="futurefeatures_daredevil" value="daredevil" />
      <label for="futurefeatures_daredevil">Act unconvincingly like that guy off of Daredevil</label>
    </p>
    <p>
      <input type="checkbox" name="futurefeatures" id="futurefeatures_laxative" value="laxative" />
      <label for="futurefeatures_laxative">Have a laxative effect</label>
    </p>
  </fieldset>
  <fieldset>
    <legend class="stringlength-msgContainer stringlength-prompt">
      How long is a piece of string?
    </legend>
    <p>
      <input type="radio" name="stringlength" id="stringlength_tiny" value="tiny" />
      <label for="stringlength_tiny">Pathetically tiny</label>
    </p>
    <p>
      <input type="radio" name="stringlength" id="stringlength_modest" value="modest" />
      <label for="stringlength_modest">Fairly modest</label>
    </p>
    <p>
      <input type="radio" name="stringlength" id="stringlength_average" value="average" />
      <label for="stringlength_average">About average, right guys?</label>
    </p>
    <p>
      <input type="radio" name="stringlength" id="stringlength_massive" value="massive" />
      <label for="stringlength_massive">Overwhelmingly massive</label>
    </p>
    <p>
      <input type="radio" name="stringlength" id="stringlength_other" value="other" />
      <label for="stringlength_other">Other</label>
    </p>
    <!-- in a proper form, you'd show / hide this bit depending on the answer above -->
    <p>
      <label for="stringlength_otherVal">
        <span class="question">Other:</span>
        <input type="text" name="stringlength_otherVal" id="stringlength_otherVal" />
      </label>
    </p>
  </fieldset>
  <p>
    And finally, a stupid question because I can't think of a good way to
    demo custom form tests...
  </p>
  <p>
    <label for="ageplus50">
      <span class="question">Your age + 50:</span>
      <input type="text" name="ageplus50" id="ageplus50" />
    </label>
  </p>
  <p><input type="submit" value="Submit" /></p>
</form>

Note this use of class names ending in "-msgContainer" and "-prompt". These are hooks for the default error message output.

JavaScript

The script for creating the form object and adding validation tests:

// create our form
var myForm = new glow.forms.Form("#testForm")
  // add tests for email address
  .addTests(
    "email",
    // we don't really need a 'required' check as the 'email' check
    // will do that, although we get to provide a different error messsage
    ["required", {
      on: "change submit",
      message:"We require your email address for spamming purposes"
    }],
    ["isEmail", {
      on: "change submit",
      message:"That's no email address!"
    }]
  )
  // add tests for password
  .addTests(
    "password",
    ["required", {
      on: "idle change submit",
      message:"We're very security conscious, enter a password"
    }],
    ["minLen", {
      on: "idle change submit",
      arg: 5,
      message:"Passwords must have a minimum of 5 characters"
    }],
    ["maxLen", {
      on: "idle change submit",
      arg: 11,
      message:"Passwords cannot have more than 10 characters"
    }],
    ["regex", {
      on: "idle change submit",
      arg: /^[A-Za-z0-9_]+$/,
      message:"Passwords can only contain letters, numbers and the underscore character"
    }],
    // getting fussy...
    ["regex", {
      on: "idle change submit",
      arg: /([A-Z].*[0-9]|[0-9].*[A-Z])/,
      message:"Passwords must contain at least one uppercase character and number"
    }],
    ["regex", {
      on: "idle change submit",
      arg: /^[A-Za-z]/,
      message:"The first character must be a letter"
    }],
    ["regex", {
      on: "idle change submit",
      arg: /^[A-Z]/,
      message:"The first character must be a letter and uppercase"
    }],
    ["regex", {
      on: "idle change submit",
      arg: /^G/,
      message:"The first character must be a letter and uppercase... and be the letter 'g'"
    }]
  )
  // check passwords match
  .addTests(
    "passwordagain",
    ["sameAs", {
      on: "change submit",
      arg: "password",
      message:"Passwords don't match!"
    }]
  )
  // add tests for age
  .addTests(
    "age",
    ["required", {
      on: "change submit",
      message:"Please enter your age"
    }],
    ["isNumber", {
      on: "change submit",
      message:"Please enter your age as a number"
    }],
    ["range", {
      on: "change submit",
      arg: "3..120",
      message:"Ok, and now your real age please"
    }]
  )
  // add tests for things we'd like glow to do in future...
  .addTests(
    "futurefeatures",
    ["minCount", {
      on: "submit",
      arg: 2,
      message:"You need to select at least 2 options"
    }]
  )
  // and finally the ominous string question
  .addTests(
    "stringlength",
    ["required", {
      message: "Please state the length of string"
    }]
  )
  // how to deal with 'other'.
  .addTests(
    "stringlength_otherVal",
    ["is", {
      on: "submit",
      field: "stringlength",
      arg: "other"
    }],
    ["required", {
      on: "submit",
      message: "Please enter your opinion on the length of the string"
    }]
  )
  .addTests(
    "ageplus50",
    // require the age field to be filled in
    ["isNumber", {
      on: "change submit",
      field: "age"
    }],
    ["custom", {
      on: "change submit",
      arg: function(values, opts, callback, formData) {
        var message = "Nah, try again";
        // we assume we're only going to get one value for this field
        if (values[0] == Number(formData.age) + 50) {
          return callback(glow.forms.PASS, message);
        } else {
          return callback(glow.forms.FAIL, message);
        }
      }
    }]
  )

The examples above are deliberately verbose to show a variety of examples. See a full list of validation tests.

CSS

By default, the error output is unstyled. Here are the styles used on this page:

#testForm .glow-errorMsg {
  font-weight: bold;
  color: #900;
}
#testForm legend .glow-errorMsg {
  display: block;
  margin-top: 5px;
}
#testForm .glow-errorSummary {
  border-left: 4px solid #b00;
  background: #ffa;
  padding: 4px 10px;
  margin-bottom: 10px;
}