validation - jquery tooltip to display validator messages not changing back to invalid -

validation - jquery tooltip to display validator messages not changing back to invalid -

i have implemented popular solution article (jquery tooltip display validator messages) part working brilliantly - unless alter input after been flagged success...

so here happens on form submission (with errors): 1. invalid fields correctly shown error. good. 2. come in text field, div updates include 'checked' class , image changes. good. 3. remove text in order create error again. still shows success. bad. heres code: js file

$.validator.setdefaults( { invalidhandler: function(){ toggletopmessagebox('error') }, submithandler: function() { toggletopmessagebox() document.frmtransaction.hidsubmitform.value='submit'; document.frmtransaction.submit(); }, success: function(element) { $(element).addclass("checked"); }, errorplacement: function(error, element) { var container = $('<div />'); container.addclass('inlinevalidation'); // add together class wrapper error.insertafter(element); error.wrap(container); $("<div class='errorimage'></div>").insertafter(error); }, ignore: ":hidden:not(select)" });

css

div.inlinevalidation { position: relative !important; display: inline-block; top: -2px; } div.inlinevalidation:hover { z-index:1005; } div.inlinevalidation label { display: none !important; vertical-align: middle; } div.inlinevalidation:hover label.error:not(.checked) { display: inline-block !important; position: absolute; left:30px; width:150; padding:5px; background-color: #e96d63; border: 3px #e96d63 solid; border-radius: 0.5em; color: white; opacity: 0.85; } label.error + div.errorimage { background:url("images/error_22x22.png") no-repeat 0px 0px; margin:4px; display:inline-block !important; width:22px; height:22px; vertical-align: middle; } label.checked + div.errorimage { background:url("images/success_22x22.png") no-repeat 0px 0px; margin:4px; display:inline-block !important; width:22px; height:22px; vertical-align: middle; }

if alter errorplacement

errorplacement: function(error,element){ error.insertafter(element); },

then behaves correctly, of course of study i've lost div formatting / wrapper. have tried adding element.removeclass("checked") not seem create difference.

tried post pics help, i've got no rep beingness newbie.

anyway, in advance has suggestions me, much appreciated.

jp

jquery validation