Version 1.5Example Form Validation

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;
}