Блог

У меня есть большая форма проверки, которая работает очень хорошо, за исключением одной проблемы. Дело в том, что у меня есть 2 правила, которые нужно поместить в один и тот же div (без использования правила, их нужно перечислять отдельно), которые будут иметь красную рамку вокруг него / стиль блока. что достигается, так это div, который обертывает 2 фрейма. стиль / интервал в порядке. проблема в том, что когда все поля заполнены, и даже если ошибки нет, мне все равно выдается маленькое красное окошко (стиль div остается как display = block. Поскольку это мои errorcontainers, не должен ли дисплей динамически меняться на none, как только поля в нем допустимы? могу ли я каким-либо образом изменить отображение обратно на none? как только поля в этой строке станут действительными? большое спасибо, я занимался этим несколько дней.

вот код, который я использую (соответствующие части).

 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) 
}
  

и

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

      highlight: function(element) {

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

и 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;   
}
  

редактировать, извините, вот html-код. У меня есть несколько строк, подобных этой. Чего я добиваюсь, так это плавающего окна справа от div, в котором перечислены ошибки в этой конкретной строке

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

и вот скриншот:
http://img.photobucket.com/albums/v385/gefeno/screenshot.jpg

Вы можете добавить правило подсветки, чтобы изменить цвет div при отсутствии ошибки

 highlight: function(element) {

         $ms(element).closest(".BF_Body").next().addClass('billing_e')
      },

unhighlight: function (element, errorClass) {

        $ms(element).closest(".BF_Body").next().addClass('success class')            
    }
  

Не уверен, что это сработает, но вы можете попробовать добавить идентификаторы в окна сообщений, а затем перечислить их в вашем .validate()

Поэтому вместо:

 errorContainer: ".billing_e"
  

Попробуйте:

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

Кажется, это ближе к тому, что показано в примере в документах (http://docs.jquery.com/Plugins/Validation/validate#toptions )