JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css">
<div data-dojo-type="dijit/form/Form" id="myForm" data-dojo-id="myForm"
encType="multipart/form-data" action="" method="">
<script type="dojo/on" data-dojo-event="reset">
return confirm('Press OK to reset widget values');
</script>
<script type="dojo/on" data-dojo-event="submit">
if(this.validate()){
return confirm('Form is valid, press OK to submit');
}else{
alert('Form contains invalid data. Please correct first');
return false;
}
return true;
</script>
<table style="border: 1px solid #9f9f9f;" cellspacing="10">
<tr>
<td>
<label for="name">Name:</label>
</td>
<td>
<input type="text" id="name" name="name" required="true" data-dojo-type="dijit/form/ValidationTextBox"/>
</td>
</tr>
<tr>
<td>
<label for="dob">Date of birth:</label>
</td>
<td>
<input type="text" id="dob" name="dob" data-dojo-type="dijit/form/DateTextBox"/>
</td>
</tr>
<tr>
<td>
<label for="dob">number</label>
</td>
<td>
<input type="text" id="num" name="num" data-dojo-type="dijit/form/NumberTextBox"/>
</td>
</tr>
</table>
<button data-dojo-type="dijit/form/Button" type="button" onClick="console.log(myForm.getValues())">Get Values from form!</button>
<button data-dojo-type="dijit/form/Button" type="submit" name="submitButton" value="Submit">Submit</button>
<button data-dojo-type="dijit/form/Button" type="reset">Reset</button>
</div>
<p id="formState">Interact with the form to see changes in state here.</p>
JavaScript
require(["dijit/registry", "dojo/parser", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox","dijit/form/NumberTextBox"], function(registry) {
var myForm = registry.byId('myForm');
var formStateNode = document.getElementById('formState');
myForm.watch('state', function(name, oVal, nVal) {
console.log(name, oVal, nVal);
formStateNode.innerHTML = 'State changed from "' + oVal + '" to "' + nVal + '".';
});
});