Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#13797 closed defect (fixed)

dijit.form.Select with required=true not revalidating when changed

Reported by: mmccreary Owned by: Douglas Hays
Priority: high Milestone: 1.7
Component: Dijit - Form Version: 1.6.1
Keywords: select required validate Cc: [email protected]
Blocked By: Blocking:


If a dijit.form.Select’s required param is set to true, the select box validates correctly when dijit.form.Select.validate() is called explicitly. However, if a select box’s state is “error” after validate() is called, it remains in “error” even when a valid option is selected.

I have extended the dijit.form.Select’s validate() function and confirmed that it is not being called when onChange is fired. That was the behavior in 1.5.1 and in 1.6.1 other widgets seem to re-validate onChange.

Attachments (1)

DojoSelectTest.html (2.4 KB) - added by mmccreary 11 years ago.

Download all attachments as: .zip

Change History (9)

comment:1 Changed 11 years ago by mmccreary

As a work around I have added the following javascript

// Extend _handleOnChange function for dijit.form.Select widgets to force them to revalidate when required=true and onChange is fired
    	dojo.extend(dijit.form.Select, {
    		_handleOnChange: function(/*anything*/ newValue, /*Boolean?*/ priorityChange){
    			// summary:
    			//		Called when the value of the widget is set.  Calls onChange() if appropriate
    			// newValue:
    			//		the new value
    			// priorityChange:
    			//		For a slider, for example, dragging the slider is priorityChange==false,
    			//		but on mouse up, it's priorityChange==true.  If intermediateChanges==false,
    			//		onChange is only called form priorityChange=true events.
    			// tags:
    			//		private
    			if(this._lastValueReported == undefined && (priorityChange === null || !this._onChangeActive)){
    				// this block executes not for a change, but during initialization,
    				// and is used to store away the original value (or for ToggleButton, the original checked state)
    				this._resetValue = this._lastValueReported = newValue;
    			this._pendingOnChange = this._pendingOnChange
    				|| (typeof newValue != typeof this._lastValueReported)
    				|| (, this._lastValueReported) != 0);
    			if((this.intermediateChanges || priorityChange || priorityChange === undefined) && this._pendingOnChange){
    				this._lastValueReported = newValue;
    				this._pendingOnChange = false;
    					// setTimout allows hidden value processing to run and
    					// also the onChange handler can safely adjust focus, etc
    					this._onChangeHandle = setTimeout(dojo.hitch(this,
	   							this._onChangeHandle = null;
	   							//*** Added if block to call validate() when required=true and isFocused=true***
	   							if (this.required && this.focused){	   								
    					), 0); // try to collapse multiple onChange's fired faster than can be processed

comment:2 Changed 11 years ago by Douglas Hays

Component: GeneralDijit - Form
Owner: set to Douglas Hays

comment:3 Changed 11 years ago by Douglas Hays

Resolution: worksforme
Status: newclosed

I need to understand how to recreate this problem before any code is changed. I tried to run validate() from a button onclick handler but everything seems to be working properly. Please attach a small HTML file showing the problem.

Changed 11 years ago by mmccreary

Attachment: DojoSelectTest.html added

comment:4 Changed 11 years ago by mmccreary

Maybe I didn’t explain the problem very well. The issue is not running validate() on the button’s onClick, or the form’s onSubmit. The issue is that the dijit.form.Select is not re-validating onChange.

I’ve attached a small HTML file. I’ve added a small line of CSS to allow the Selects to display as yellow when in error to be consistent with other Widgets. Also, I’m using Firefox 3.6.21.

To recreate the issue:

  • First load the HTML.
  • Without selecting any values click the submit button. (Note that both Selects and the FilteringSelect? are in a state of error)
  • Then select a valid option on the Selects and FilteringSelect? (Note that the Selects remain in a state of error until validate() is explicitly called, while the FilteringSelect? is now in a valid state)

comment:5 Changed 11 years ago by mmccreary

Also, as a comparison, change the dojo version to 1.5.1 on the HTML that I submitted and run through the same steps. Then note the behavior of the Selects

Last edited 11 years ago by mmccreary (previous) (diff)

comment:6 Changed 11 years ago by Douglas Hays

Milestone: tbd1.7
Resolution: worksformefixed

Thanks for the testcase. When I run the testcase using Dojo 1.7 (trunk), then it behaves much better. Can you verify this is fixed using trunk?

comment:7 Changed 11 years ago by mmccreary

This does appear to be working much better using Dojo 1.7 (trunk).

comment:8 Changed 11 years ago by bill

Summary: dijit.form.Select not validating onChange when required=truedijit.form.Select with required=true not revalidating when changed

Just trying to make summary more understandable.

Note: See TracTickets for help on using tickets.