[Dojo-interest] DropdownDatePicker and DateText box?
Mike Kinney
mike.kinney at gmail.com
Tue Feb 6 10:11:37 MST 2007
How do I combine the use of DropdownDatePicker and DateText box?
1) Are they "compatible"?
2) What's the best way to hook it up to a form? DropdownDatePicker is a div,
not an html "input". If I add another div tag, it shows at the top of the
page.
3) If I use DropdownDatePicker, then I can leave the date blank. What if I
want the field to be required?
4) The form validation "passes" even though the input is blank.
I thought it would have been easy to hookup the DropdownDatePicker to an
existing form that has a date input... it does not seem to be... any help
would be appreciated.
This code checks to ensure the date is non-blank and is valdated.
--- snip ---
<html>
<head>
<title>Form Binding with Validation</title>
<script type="text/javascript" src="/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.io.*");
dojo.require("dojo.validate");
dojo.require("dojo.validate.check");
dojo.require("dojo.widget.validate");
dojo.require("dojo.widget.ValidationTextbox");
dojo.require("dojo.widget.RealNumberTextbox");
dojo.require("dojo.widget.IntegerTextbox");
dojo.require("dojo.widget.DateTextbox");
dojo.require("dojo.widget.RegexpTextbox");
dojo.require("dojo.widget.DropdownDatePicker");
//djConfig.isDebug=1;
function init() {
// set focus to first form, first input field, and select all text in
box
document.forms[0][0].select();
window.status="";
x = new dojo.io.FormBind({
formNode: "test",
load: function(type, data, e) {
dojo.byId("output").innerHTML = dojo.string.escapeXml(data);
// Note: For the status area to change, the user might have to
change a setting in their browser preferences
window.status="Submitted!";
}
});
x.onSubmit = function(form) {
window.status = "Checking...";
// This shows as the full RFC date. I just want the dateFormat'ed
date.
//alert("date1:" + dojo.widget.byId('date1').value );
// To prevent the form from submitting you need to ensure
// the input fields are set when added to the form as well
// as defined here.
var profile = {
required: [ "name", "integer1", "real1", "date1", "grade" ],
constraints: {
grade: function() {
var re = new RegExp("^[ABCDF]$");
if (form.grade.value.match(re)) {
return(true);
}
},
integer1: dojo.validate.isInteger,
// Note: You can validate the same fields multiple times.
// Also note that if you forget to add a field that has
// "form" validation, then you will not be able to see
// that input in the getMissing() call. Should submit
// enhancement to dojo to perhaps check for that.
integer2: dojo.validate.isInteger,
integer2: [dojo.validate.isInRange, { min:"10", max:"20" }
],
real1: dojo.validate.isRealNumber,
date1: [dojo.validate.isValidDate, "MM/DD/YYYY"]
}
};
var results = dojo.validate.check(form, profile);
// Let the user know why they cannot continue...
var s="";
if (!results.isSuccessful()) {
s="Warning: Could not submit form.";
if (results.hasInvalid()) {
s += "Review these fields:" + results.getInvalid() + ":";
alert(s);
}
if (results.hasMissing()) {
s += "These fields are required:" + results.getMissing() +
":";
alert(s);
}
}
else {
s="Submitting form.";
}
window.status=s;
return(results.isSuccessful()); // return true if it passed the
validation
// if false, then the form will not
be submitted
}
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<!-- Note: '/showPost' simply prints out the name/value pairs -->
<form action="/showPost" method="post" id="test" name="test">
<!--form action="" method="post" id="test" name="test"-->
<table>
<tr>
<td>Name:</td>
<td><input type="text" dojoType="ValidationTextBox"
required="true" missingMessage="* Required" name="name" id="name"
trim="true" value="Mike" /></td>
</tr>
<tr>
<td>integer:</td>
<td><input type="text" dojoType="IntegerTextbox" required="true"
missingMessage="* Required" invalidMessage="Enter an integer value."
id="integer1" name="integer1" trim="true" value="1" /></td>
</tr>
<tr>
<tr>
<td>integer2: <br>(10-20)</td>
<td><input type="text" dojoType="IntegerTextbox" required="true"
missingMessage="* Required" invalidMessage="Enter an integer value. (10-20)"
min="10" max="20" id="integer2" name="integer2" trim="true" value="11"
/></td>
</tr>
<tr>
<td>real1:</td>
<td><input type="text" dojoType="RealNumberTextbox"
required="true" missingMessage="* Required" invalidMessage="Enter a real
number." id="real1" name="real1" trim="true" value="8.1" /></td>
</tr>
<tr>
<td>Date:</td>
<td>
<input dojoType="DateTextbox" trim="true" required="true"
missingMessage="* Required" invalidMessage="Enter a valid date.
(mm/dd/yyyy)" id="date1" name="date1" value="" /></td>
</tr>
<tr>
<td>Grade:</td>
<td><input type="text" dojoType="RegexpTextbox" required="true"
missingMessage="* Required" invalidMessage="Enter a valid grade. (A, B, C,
D, or F)" size="1" regexp="^[ABCDF]$" uppercase="true" name="grade"
id="grade" value="A" /></td>
</tr>
<tr>
<td>Location:</td>
<td><input readOnly="true" type="text" name="loc" value="Here!"
/></td>
</tr>
<tr>
</table>
<br />
<input type="submit" style="display:none" value="submit" />
<br />
<div id="output">Complete the form and press ENTER.</div>
</form>
</body>
</html>
--- snip ---
If I just change the date input to this:
<input dojoType="DropdownDatePicker" trim="true" required="true"
missingMessage="* Required" invalidMessage="Enter a valid date.
(mm/dd/yyyy)" id="date1" name="date1" value="" /></td>
The date picker shows up and you can select dates, but the form validation
no longer "works". I *know* it's because I no longer have the type as
DateTextbox, but I don't know any other way to "connect" the two dojoTypes.
Can anyone enlighten me?
If I change it back to the code snippet above and add a new div tag like
this:
<input dojoType="DateTextbox" trim="true" required="true"
missingMessage="* Required" invalidMessage="Enter a valid date.
(mm/dd/yyyy)" id="date1" name="date1" value="" /></td>
<div dojoType="DropdownDatePicker" inputName="date1" ></div>
Then I get a date picker at the top and it's not tied to the input.
Any help would be appreciated!
--
-------------------------------------
Mike Kinney
Red Ace Solutions, Inc.
Phone 360-737-6400 x201
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://dojotoolkit.org/pipermail/dojo-interest/attachments/20070206/57e278c7/attachment.html
More information about the Dojo-interest
mailing list