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

[mmccreary]

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.

[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.compare(newValue, this._lastValueReported) != 0);
    			if((this.intermediateChanges || priorityChange || priorityChange === undefined) && this._pendingOnChange){
    				this._lastValueReported = newValue;
    				this._pendingOnChange = false;
    				if(this._onChangeActive){
    					if(this._onChangeHandle){
    						clearTimeout(this._onChangeHandle);
    					}
    					// setTimout allows hidden value processing to run and
    					// also the onChange handler can safely adjust focus, etc
    					this._onChangeHandle = setTimeout(dojo.hitch(this,
	   						function(){
	   							this._onChangeHandle = null;
	   							this.onChange(newValue);
	   							//*** Added if block to call validate() when required=true and isFocused=true***
	   							if (this.required && this.focused){	   								
	   								this.validate(this.isFocused);
	   							}
	   						}
    					), 0); // try to collapse multiple onChange's fired faster than can be processed
    				}
    			}
    		}
    	}); 

[Douglas Hays]

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.

[mmccreary]

DojoSelectValidationTest?

[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)

[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

[Douglas Hays]

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?

[mmccreary]

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

[bill]

Just trying to make summary more understandable.