dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
115 lines (108 loc) • 4.48 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>dijit.form.Form Valid/Invalid State Test</title>
<style type="text/css">
@import "../../themes/claro/document.css";
@import "../css/dijitTests.css";
</style>
<!-- required: the default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>
<!-- only needed for alternate theme testing: -->
<script type="text/javascript" src="../_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.Form");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">dijit.form.Form Valid/Invalid State Test</h1>
<p>
Tests that dijit.form.Form correctly changes state from valid to invalid (as indicated by disabled/enabled submit button)
according to child widget state.
</p>
<form id="form1" data-dojo-type="dijit/form/Form" data-dojo-props='action:"", name:"example", method:""'>
<script type="dojo/connect" data-dojo-event="startup">
var submitButton = dijit.byId("submitButton");
// set initial state
submitButton.set("disabled", !this.isValid());
this.connect(this, "onValidStateChange", function(state){
submitButton.set("disabled", !state);
});
</script>
<table role="presentation">
<tr>
<td><label for="name">Name:</label></td>
<td><input id="name" data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-props='required:true, name:"name" '/></td>
</tr>
<tr id="newRow" style="display: none;">
<td><label for="lastName">Last Name:</label></td>
<td><input id="lastName" /></td>
</tr>
<tr>
<td><label for="birth">Birthdate (before 2006-12-31):</label><br><br><br><br></td>
<td><div><input id="birth" data-dojo-type="dijit/form/DateTextBox" data-dojo-props='value:"2000-01-01",
required:true, name:"birth", constraints:{min:"1900-01-01", max:"2006-12-31"} '/> <br>
<button id="disable" onclick="dijit.byId('birth').set('disabled',true);return false;">Disable</button>
<button id="enable" onclick="dijit.byId('birth').set('disabled',false);return false;">Enable</button>
<button id="reset" onclick="dijit.byId('birth').reset();return false">Reset</button> <br><br>
</div></td>
</tr>
<tr>
<td><label for="notes">Notes (optional)</label></td>
<td><input id="notes" data-dojo-type="dijit/form/TextBox"
data-dojo-props='name:"notes" '/></td>
</tr>
<tr id="newRow2" style="display: none;">
<td><label for="color">Favorite Color</label></td>
<td><select id="color">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</select></td>
</tr>
</table>
<button id="submitButton" data-dojo-type="dijit/form/Button" >
<script type="dojo/method" data-dojo-event="onClick">
console.dir(dijit.byId("form1").get('value'));
</script>
Submit
</button>
<button id="addMoreFields" data-dojo-type="dijit/form/Button" >
<script type="dojo/method" data-dojo-event="onClick">
new dijit.form.FilteringSelect({id: "color",
name: "color",
required: true},
dojo.byId("color"));
new dijit.form.ValidationTextBox({id: "lastName",
name: "lastName",
required: true},
dojo.byId("lastName"));
dojo.byId("newRow").style.display = "";
dojo.byId("newRow2").style.display = "";
this.set("disabled", true);
this.domNode.blur();
// Call this, since we added a new widget - so that our
// form knows that we have something else to watch.
dijit.byId("form1").connectChildren();
</script>
Add More Fields
</button>
<button data-dojo-type="dijit/form/Button">
<script type="dojo/method" data-dojo-event="onClick">
dijit.byId("name").validate();
</script>
validate
</button>
</form>
</body>
</html>