Page 1 of 1

customized error DIV with jQuery validation & context help

Posted: Sun Apr 12, 2009 4:34 am
by cohq82
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:

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>
 

Re: customized error DIV with jQuery validation & context help

Posted: Mon Apr 13, 2009 10:24 pm
by cohq82
Can someone help?

What I am trying to do is to have my own error message DIV with display:none initially. If there is error, I want to run the fadein/fadeout to show that error.

The structure of the input/error DIV like this:
<div><input></input></div>
<div>context help</div>
<div>error msg</div>

The way this plugin works is to insert a LABEL right next to the INPUT and this is not what I want. I want to reuse the html code I have in the error msg DIV. I tried to look in errorPlacement but not sure how to use it. The goal is to insert/inject a jQuery function to do fadein/fadeout on a certain div when error occurs