dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
75 lines (71 loc) • 2.97 kB
HTML
<html>
<head>
<script src="../../../dojo/dojo.js"></script>
<script>
require(["dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/query", "dojo/_base/array", "dojox/validate", "dojox/validate/check", "dojox/validate/web", "dojo/domReady!"
], function(dom, on, domConstruct, query, arrayUtil, validate) {
var thisForm = dom.byId('myForm');
on(thisForm, "submit", function(event) {
event.preventDefault();
var profile = {
required: [ "field1", "field2", "field3" ],
constraints: {
field1: [myValidationFunction, { "message" : "Field 1 is incorrect. Please try again." }],
field2: [validate.isEmailAddress, false, true],
field3: ["myValidationFunction", { "message" : "Field 3 is incorrect. Please try again." }]
}
}
var results = validate.check(thisForm, profile);
if (results.isSuccessful()) { // If validation is a success
return true;
} else {
// Start by removing error messages already generated from previous submission attempt
query(".error", thisForm).forEach(domConstruct.destroy);
var missing = results.getMissing();
if (missing.length){
arrayUtil.forEach(missing, function(missingField){
domConstruct.create("span", { innerHTML : missingField + " is required.", "class" : "error" }, query("input[name=" + missingField + "]")[0], "after");
});
}
var invalid = results.getInvalid();
console.log(invalid);
if (invalid.length) {
arrayUtil.forEach(invalid, function(constraintResponse){
domConstruct.create("span", { innerHTML : constraintResponse.message || "Invalid input. Please try again.", "class" : "error" }, query("input[name=" + constraintResponse.field + "]")[0], "after");
});
}
return false;
}
});
});
function myValidationFunction(value, options) {
// validation stuff goes here
return { isValid : false, message : options.message }
}
</script>
<style>
body { font-family: sans-serif; }
.error { font-size:0.8em; color:red; font-style:italic; }
dd { margin-bottom:20px; }
input[type=text] { padding:5px; color:#242424; border:1px solid #242424; width: 50%; margin-right:5%; }
input[type=submit] { padding:10px; font-weight:bold; text-transform:uppercase; margin:10px 0; }
</style>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>Validate Check Demo</legend>
<dl>
<dt><label for="field1">Field 1 (custom validation function)</label></dt>
<dd><input type='text' name='field1' value='field1 test value' /></dd>
<dt><label for="field2">Field 2 (validate.isEmailAddress)</label></dt>
<dd><input type='text' name='field2' value='field2@testvalue.com' /></dd>
<dt><label for="field3">Field 3 (custom validation function called by string)</label></dt>
<dd><input type='text' name='field3' value='field3 test value' /></dd>
</dl>
</fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>