dijit.form.Form¶
| Authors: | Doug Hays, Bill Keese |
|---|---|
| Developers: | Doug Hays, Bill Keese |
| Available: | since V1.0 |
Contents
dijit.form.Form is the dijit equivalent of the <form> node, and it provides various methods for serializing/deserializing form data, and checking whether or not a form is valid.
Examples¶
Declarative example¶
<script>
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.DateTextBox");
</script>
<div dojoType="dijit.form.Form" id="myForm" jsId="myForm"
encType="multipart/form-data" action="" method="">
<script type="dojo/method" event="onReset">
return confirm('Press OK to reset widget values');
</script>
<script type="dojo/method" event="onSubmit">
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:
</td>
<td>
<input type="text" id="name" name="name" required="true" dojoType="dijit.form.ValidationTextBox"/>
</td>
</tr>
<tr>
<td>
<label for="dob">Date of birth:
</td>
<td>
<input type="text" id="dob" name="dob" dojoType="dijit.form.DateTextBox"/>
</td>
</tr>
</table>
<button dojoType="dijit.form.Button" type=button onClick="console.log(myForm.getValues())">Get Values from form!</button>
<button dojoType="dijit.form.Button" type="submit" name="submitButton" value="Submit">Submit</button>
<button dojoType="dijit.form.Button" type="reset">Reset</button>
</div>
Note that it’s using a <div> node instead of the obvious choice of a <form> node because of some IE issues
Preparing and validating a form for XHR requests¶
To validate a form you use the isValid() function. Lets take at a simple example using a declaratively created form:
<script>
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.DateTextBox");
dojo.addOnLoad(function(){
var myForm = dijit.byId("myFormTwo");
dojo.connect(myForm, "onSubmit", function(e){
e.preventDefault();
if (myForm.isValid()){
alert("Ready to submit data: "+dojo.toJson(myForm.attr("value")) );
}
});
});
</script>
<div dojoType="dijit.form.Form" id="myFormTwo" jsId="myFormTwo"
encType="multipart/form-data" action="" method="">
<table style="border: 1px solid #9f9f9f;" cellspacing="10">
<tr>
<td>
<label for="name">Name:
</td>
<td>
<input type="text" name="name" required="true" dojoType="dijit.form.ValidationTextBox"/>
</td>
</tr>
<tr>
<td>
<label for="dob">Date of birth:
</td>
<td>
<input type="text" name="dob" dojoType="dijit.form.DateTextBox"/>
</td>
</tr>
</table>
<button dojoType="dijit.form.Button" onClick="console.log(myFormTwo.attr('value'))">Get Values from form!</button>
<button dojoType="dijit.form.Button" type="submit" name="submitButtonTwo" value="Submit">Submit</button>
<button dojoType="dijit.form.Button" type="reset">Reset</button>
</div>
The validate() function does some extra UI related work, including highlighting invalid dijits in the form, and scrolling the first invalid dijit into view. Try opening this example and immediately clicking Submit, and compare the behaviour to the previous example.
<script>
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.DateTextBox");
dojo.addOnLoad(function(){
var myForm = dijit.byId("myFormTwo");
dojo.connect(myForm, "onSubmit", function(e){
e.preventDefault();
if (myForm.validate()){
alert("Ready to submit data: "+dojo.toJson(myForm.attr("value")) );
}
});
});
</script>
<div dojoType="dijit.form.Form" id="myFormTwo" jsId="myFormTwo"
encType="multipart/form-data" action="" method="">
<table style="border: 1px solid #9f9f9f;" cellspacing="10">
<tr>
<td>
<label for="name">Name:
</td>
<td>
<input type="text" name="name" required="true" dojoType="dijit.form.ValidationTextBox"/>
</td>
</tr>
<tr>
<td>
<label for="dob">Date of birth:
</td>
<td>
<input type="text" name="dob" dojoType="dijit.form.DateTextBox"/>
</td>
</tr>
</table>
<button dojoType="dijit.form.Button" onClick="console.log(myFormTwo.attr('value'))">Get Values from form!</button>
<button dojoType="dijit.form.Button" type="submit" name="submitButtonTwo" value="Submit">Submit</button>
<button dojoType="dijit.form.Button" type="reset">Reset</button>
</div>
Using native form elements¶
dijit.form.Form doesn’t fully support native elements as children. In particular, myForm.attr(“value”) will return an Object listing all the values of the contained widgets, but it won’t list the values of the contained native <input> elements.
It is possible to submit a dijit.form.Form with native elements to the server, via standard (non-ajax) form submission. Both types of values (widgets and plain <input> elements) will be submitted. However, in that case the app has to do validation itself. The Form widget below will validate only when you have entered both a name in the ValidationTextBox widget AND when you have selected 1 of the native HTML radio buttons.
<script>
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ValidationTextBox");
</script>
<div dojoType="dijit.form.Form" id="myFormThree" jsId="myFormThree"
encType="multipart/form-data" action="" method="">
<script type="dojo/method" event="validate">
return dojo.query('INPUT[name=order]','myFormThree').filter(function(n){return n.checked}).length > 0 &&
dijit.form.Form.prototype.validate.apply(this, arguments);
</script>
<script type="dojo/method" event="onSubmit">
var f = dojo.byId("myFormThree");
var s = "";
for(var i = 0; i < f.elements.length; i++){
var elem = f.elements[i];
if(elem.name == "button"){ continue; }
if(elem.type == "radio" && !elem.checked){ continue; }
s += elem.name + ": " + elem.value + "\n";
}
alert("Unvalidated data that would be submitted:\n" + s);
return false;
</script>
<table style="border: 1px solid #9f9f9f;" cellspacing="10">
<tr>
<td>
<label for="name">Name:
</td>
<td>
<input type="text" name="name" required="true" dojoType="dijit.form.ValidationTextBox"/>
</td>
</tr>
<tr>
<td>
<label for="dob">Order
</td>
<td>
<input type="radio" name="order" value="Food"> Food
<input type="radio" name="order" value="Drinks"> Drinks
</td>
</tr>
</table>
<button dojoType="dijit.form.Button" onClick="alert('Form is ' + (myFormThree.validate()?'':'not ') + 'valid');return false">
Validate form
</button>
<button dojoType="dijit.form.Button" type="submit" name="submitButtonThree" value="Submit">Submit</button>
<button dojoType="dijit.form.Button" type="reset">Reset</button>
</div>
Accessibility¶
The Form widget acts as a container for other widgets and HTML elements and has no specific behaviors affecting accessibility.