Opened 8 years ago

Closed 8 years ago

Last modified 8 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: mmccreary@…
Blocked By: Blocking:

Description

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 8 years ago.
DojoSelectValidationTest?

Download all attachments as: .zip

Change History (9)

comment:1 Changed 8 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.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
    				}
    			}
    		}
    	}); 

comment:2 Changed 8 years ago by Douglas Hays

Component: GeneralDijit - Form
Owner: set to Douglas Hays

comment:3 Changed 8 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 8 years ago by mmccreary

Attachment: DojoSelectTest.html added

comment:4 Changed 8 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 8 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.

Version 0, edited 8 years ago by mmccreary (next)

comment:6 Changed 8 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 8 years ago by mmccreary

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

comment:8 Changed 8 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.