Resolving JQuery.validate as my necessary part:2

After the Resolving JQuery.validate as my necessary, It still have some trouble. When selecting the "0" value of "select" (* Dropdown in HTML), the highlight was appear ( the satisfied in the part 1 solution ), but it still appear when i had changing it with not "0" or "" value. Fiuh.....observing and debugging again in this JQuery.validation.

{ Indonesian version : http://faridjauhari.wordpress.com/2009/12/31/edit-jquery-validate-2/ }

Finally,...Gotcha.....

The solution is adding "onchange function" as the default action in the extends class, that will extend to any input (* HTML tag :< input /> ) in the form that applying the JQuery.validation.



/****************** original code *******************/
onfocusin: function(element) {
this.lastActive = element;

// hide error label and remove error class on focus if enabled
if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass );
this.errorsFor(element).hide();
}
},

onfocusout: function(element) {
if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
this.element(element);
}
},

onkeyup: function(element) {
if ( element.name in this.submitted || element == this.lastElement ) {
this.element(element);
}
},

onclick: function(element) {
if ( element.name in this.submitted )
this.element(element);
},

highlight: function( element, errorClass ) {
$( element ).addClass( errorClass );
},

unhighlight: function( element, errorClass ) {
$( element ).removeClass( errorClass );
}

/*-------------------------- original ---------------------------*/

the changes :

/************************* edited ***************************************/
onfocusin: function(element) {
this.lastActive = element;

// hide error label and remove error class on focus if enabled
if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
this.settings.unhighlight &&
this.settings.unhighlight.call(this, element, this.settings.errorClass );
this.errorsFor(element).hide();
}
},

onfocusout: function(element) {
if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
this.element(element);
}
},

onkeyup: function(element) {
if ( element.name in this.submitted || element == this.lastElement ) {
this.element(element);
}
},

// my adding code.........
onchange: function(element) {
if ( element.name in this.submitted || element == this.lastElement ) {
this.element(element);
}
},

onclick: function(element) {
if ( element.name in this.submitted )
this.element(element);
},

highlight: function( element, errorClass ) {
$( element ).addClass( errorClass );
},

unhighlight: function( element, errorClass ) {
$( element ).removeClass( errorClass );
}
/*---------------------------- edited ------------------------*/

And then the adding function that made, has to delegate to the exacly input (*tag HTML : < input/>), for that reason. We need to change the delegation in the prototype class...

/************************* original code **************************/

$(this.currentForm)
.delegate("focusin focusout keyup", ":text, :password, :file, select, textarea", delegate)
.delegate("click", ":radio, :checkbox", delegate);

/*----------------------- original code ------------------------*/

changes it with :

/************************* edited ***************************************/
$(this.currentForm)
.delegate("focusin change focusout keyup", ":text, :password, :file, select, textarea", delegate)
.delegate("click change", ":radio, :checkbox", delegate);
/*--------------------- edited -----------------------------------------*/

Finally, it's done ......

Wish this simple experience is helpful for you...

----------- sharing is sexy (original word by ibnu ) -------------------