customized error DIV with jQuery validation & context help

Hi all,

I am trying to do this quite complex Javascript operation for a form. Basically the idea is to show context help when an input is focused. But when there is error when outfocus, it will show an error instead. The context help DIV and error DIV are hidden by default and stay next to each other at the same level (code below).

I finished the context help part. However, I don’t understand the fundamental of jQuery validation plugin ([url]http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js[/url]). The point is not to use error message (LABEL) of the plugin itself but just SHOW the error DIV that I already had. I read the errorPlacement: function(error, element) feature. However, I didn’t think I have done the right thing as you can see below [I]element.parent().next().next().fadeOut(‘fast’);[/I]

Any help would be appreciate!! Thanks.

This is the code for Javascript:

[CODE]
<script type=”text/javascript”>
$(document).ready(function() {

// CONTEXT HELP
$(‘table .contexthelp’).hide();

$(‘input’).focus(function(){
$(this).parent().next().fadeIn(‘fast’);
$(this).parent().next().next().hide();
//$(this).css(‘color’, ‘#333;’);
});
$(‘input’).blur(function(){
$(this).parent().next().fadeOut(‘fast’);
});

$(“#frmregister”).validate({

rules: {
username: “required”,
email: {
required: true,
email: true
}
},
errorPlacement: function(error, element) {
element.parent().next().next().fadeOut(‘fast’);
},
debug:true

});

});
</script>[/CODE]

This is the code for the form:

[CODE]
<form method=”post” action=”#” id=”frmregister”>
<h2 class=”reg-title”>1. Thông tin &#273;&#259;ng nh&#7853;p</h2>
<div class=”reg-line”>
<div class=”reg-left”>
<label for=”” class=”reg-label”>Username</label>
</div>
<div id=”” class=”field-required”>
<input id=”username” name=”username” class=”input-text” maxlength=”50″ name=”” value=”” />
</div>
<div id=”testid” class=”field-msg” style=”display:none;”><img src=”images/arrow_msg.gif” width=”13″ height=”13″/>Context help for username</div>
<div id=”” class=”field-msg-error” style=”display:none;”><img src=”images/arrow_msg_error.gif” width=”13″ height=”13″ style=””/>Error msg for username</div>
</div>
<div class=”reg-line”>
<div class=”reg-left”>
<label for=”” class=”reg-label”>Email</label>
</div>
<div id=”” class=”field-required”>
<input id=”email” name=”email” class=”input-text” maxlength=”50″ name=”” value=”” />
</div>
<div id=”testid” class=”field-msg” style=”display:none;”><img src=”images/arrow_msg.gif” width=”13″ height=”13″/>Context help for email</div>
<div id=”” class=”field-msg-error” style=”display:none;”><img src=”images/arrow_msg_error.gif” width=”13″ height=”13″ style=””/>Error for email</div>
</div>
….
</form>
[/CODE]

Also in #JavaScript _↴