You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.9 KiB
75 lines
2.9 KiB
<!DOCTYPE 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> |