customized error DIV with jQuery validation & context help
Posted: Sun Apr 12, 2009 4:34 am
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 (http://dev.jquery.com/view/trunk/plugin ... alidate.js). 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 element.parent().next().next().fadeOut('fast');
Any help would be appreciate!! Thanks.
This is the code for Javascript:
This is the code for the form:
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 (http://dev.jquery.com/view/trunk/plugin ... alidate.js). 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 element.parent().next().next().fadeOut('fast');
Any help would be appreciate!! Thanks.
This is the code for Javascript:
Code: Select all
<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>This is the code for the form:
Code: Select all
<form method="post" action="#" id="frmregister">
<h2 class="reg-title">1. Thông tin ??ng nh?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>