customized error DIV with jQuery validation & context help

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
cohq82
Forum Commoner
Posts: 43
Joined: Mon Apr 21, 2008 8:38 pm

customized error DIV with jQuery validation & context help

Post 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>
 
cohq82
Forum Commoner
Posts: 43
Joined: Mon Apr 21, 2008 8:38 pm

Re: customized error DIV with jQuery validation & context help

Post 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
Post Reply