Question

I have a large validation form that is working very well except for one issue. The thing is, I have 2 rules that need to go into the same div (without using a rule, they need to list separatly) that will have a red border around it/block style. what this achieves is a div that wraps the 2 frames. the style/spacing is fine. the issue is, when all of the fields are filled in, and even if there is no error, I am still given a little red box (the div style stays as display=block. Since these are my errorcontainers, shouldn’t the display dynamically change to none once the fields in it are valid? is there any way i can have the display change back to none? once the fields in that row are valid? thanks so much, Ive been at this for several days.

here is the code i am using (relevant parts).

function myErrorPlacement(error, element) {
if ((element.attr("id") == "fname") || (element.attr("id") == "lname")) {
  $ms("#billing1_e").append(error) ;
}
if (element.attr("id") == "address") {
   $ms("#billing2_e").append(error) ;
}
if ((element.attr("id") == "city") || (element.attr("id") == "state1") || (element.attr("id") == "zip")) {
   $ms("#billing3_e").append(error) 
}
if ((element.attr("id") == "email") || (element.attr("id") == "emailver")) {
   $ms("#billing4_e").append(error) 
}
if ((element.attr("id") == "pass") || (element.attr("id") == "passver")) {
   $ms("#billing5_e").append(error) 
}
if ((element.attr("id") == "expmonth") || (element.attr("id") == "expyear")) {
   $ms("#billing7_e").append(error) 
}
if (element.attr("id") == "chkOffer") {
   $ms("#billing8_e").append(error) 
}
if (element.attr("id") == "billingCC") {
   $ms("#billing6_e").append(error) 
}

and

$ms("#billingForm").validate({

      highlight: function(element) {

         $ms(element).closest(".BF_Body").next().addClass('billing_e')
      },
    errorContainer: ".billing_e",
            errorPlacement: myErrorPlacement

and the css:

.billing_e
{   
position:relative;
float:left;
background-color:#f3e6e6;
border:2px solid #924949;
padding:3px 4PX;
z-index:4;
color:#924949;
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
font-weight:bold;   
}

edit, sorry, here is the html code. I have several rows like this. What I achieve is a floating box to the right of the div that lists the errors on that particular row

      <div class="BF_Body" id="billing1">
      <div class="BF_Body_L"><input name="fname"  id="fname" type="text" Title="First Name" maxlength="50" class="textboxpg2" ></div>
      <div class="BF_Body_R"><input name="lname"  id="lname" type="text" Title="Last Name" maxlength="50"  class="textboxpg2" ></div>
  </div>
  <div id="billing1_e" class="billing_e"></div>
  <div class="BF_Body" id="billing2">
    <div class="BF_Body_L"><input name="address" id="address" type="text" title="Address" maxlength="50" class="textboxpg2"></div>
    <div class="BF_Body_R"><input name="address2" id="address2" type="text" Title="Address 2" maxlength="50" class="textboxpg2"></div>
  </div>
  <div id="billing1_e" class="billing_e"></div>

and here is a screenshot:
http://img.photobucket.com/albums/v385/gefeno/screenshot.jpg

Answer 1

Not sure if this will work but you may want to try adding id’s to the message boxes then listing them out in your .validate()

So instead of:

errorContainer: ".billing_e"

Try:

errorContainer: "#messageBox1, #messageBox2, ..."

This seems to be closer to what the example shows in the docs (http://docs.jquery.com/Plugins/Validation/validate#toptions)