115 lines
4.4 KiB
HTML
115 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<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">
|
|
<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>
|
|
<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>
|