jQuery Doğrulama hata kapsayıcısını nasıl görüntülüyorsunuz

Question

Validation plugin çalışmasını yapmaya çalışıyorum. Tek tek alanlar için iyi çalışıyor, ancak tüm hataları içeren hata kapsayıcısının demo kodunu eklemeye çalıştığımda bir sorunum var. Sorun, kapsayıcıyı tüm alanlarda olduğumda tüm hatalarla göstermesidir, ancak hata kabını yalnızca kullanıcı gönderme düğmesine bastığında (ancak odağı kaybettiğinde denetimin yanında satır içi hataları gösterdiğinde) görüntülemek istiyorum.

Sorun, kapsayıcıdaki iletidir. Kap için aşağıdaki cevabında belirtildiği gibi kodu çıkardığımda, kap çıktı sadece düz metinlerdeki hataların sayısını gösterir.

Detaylı hata mesajlarının listesini almanın yolu nedir? İstediğim şey, kullanıcı sekme düğmesine bastığında ve gönderim bittiğinde sonundaki her şeyin bir özetini almak için yanlışlıkla kontrolün yanındaki "ERROR" (Hata) göstermektir. Mümkün mü? Buradan bütün girişi olan

Kodu: doğrulama eklentisi bunun için bir seçenek sunar eğer

$().ready(function() { 
     var container = $('div.containererreurtotal'); 

     // validate signup form on keyup and submit 
     $("#frmEnregistrer").bind("invalid-form.validate", function(e, validator) { 
      var err = validator.numberOfInvalids(); 
      if (err) { 
      container.html("THERE ARE "+ err + " ERRORS IN THE FORM") 
      container.show(); 
      } else { 
      container.hide(); 
      } 
     }).validate({ 
        rules: { 
          nickname_in: { 
            required: true, 
            minLength: 4 
          }, 
          prenom_in: { 
            required: true, 
            minLength: 4 
          }, 
          nom_in: { 
            required: true, 
            minLength: 4 
          }, 
          password_in: { 
            required: true, 
            minLength: 4 
          }, 
          courriel_in: { 
            required: true, 
            email: true 
          }, 
          userdigit: { 
            required: true 
          } 
        }, 
        messages: { 
          nickname_in: "ERROR", 
          prenom_in: "ERROR", 
          nom_in: "ERROR", 
          password_in: "ERROR", 
          courriel_in: "ERROR", 
          userdigit: "ERROR" 
        } 

        ,errorPlacement: function(error, element){ 
          container.append(error.clone()); 
          error.insertAfter(element); 
        } 

      }); 
    }); 

Answer 1

AND girişlerinin yanındaki hataları ayrı bir hata konteynerinde görüntülemek istiyorsanız, errorPlacement geri çağırma işlemini geçersiz kılmanız gerekecektir. sizin örnekten

:

... 
        courriel_in: "ERROR", 
        userdigit: "ERROR" 
      } 
      ,errorContainer: container 

      ,errorPlacement: function(error, element){ 
       var errorClone = error.clone(); 
       container.append(errorClone); 
       error.insertAfter(element)    
      } 

      // We don't need this options 
      //,errorLabelContainer: $("ol", container) 
      //,wrapper: 'li' 
      //,meta: "validate" 
    }); 
... 

error parametresi bir <label> etiketi içeren bir jQuery nesnesidir. element parametresi, doğrulama işleminde başarısız olan girdidir. yorumların Yukarıdaki kod ile

için

Update hata konteyner olacak belli değil hataları o klonlanmış bir kopyasını içerdiğinden. JQuery bir "gizleme" olayı verirse bunu çözmek kolaydır, ancak mevcut değildir. Bir gizlenme etkinliği ekleyelim!

 ... 
     ,errorPlacement: function(error, element){ 
      var errorClone = error.clone(); 
      container.append(errorClone); 
      error.insertAfter(element).bind("hide", function(){ 
       errorClone.hide(); 
      }); 
     } 
     ... 

:

  jQuery.aop.before({target: jQuery.fn, method: "hide"}, 
       function(){ 
        this.trigger("hide"); 
       }); 

Biz klonlanmış hatayı gizlemek için gizlemek olayı bağlamak:

1. Önce AOP plugin

2. Biz sakla yöntemi için bir tavsiye eklemek gerek

   Bir deneyin

Answer 2

Bilmiyorum, ama muhtemelen ne istediğinizi elde etmek için standart jQuery kullanabilirsiniz.

<div id="container" style="display:none;"></div> 

Sonra yakında bir girişimde göndermek için yapılır olduğunca kapsayıcı görünür hale getirecek forma bir onsubmit olayı Kargaburun edebilirsiniz: emin hiçbiri görüntü stili ayarlayarak, konteyner başlangıçta gizli konum olun formu:

jQuery('#formId').onsubmit(function() { 
    // This will be called before the form is submitted 
    jQuery('#container').show(); 
}); 

Herkesi varolan kodunuzla birleştirmeniz hile yapmalıdır.

Answer 3

Ben errorContainer kaldırmak ve daha sonra doğrulama yolunu kesmek postback ve orada böyle elle bir kap-hata eklersiniz: Sen http://docs.jquery.com/Plugins/Validation/validate#toptions

meta seçeneği belgelerine bulacaksınız

$("#frmEnregistrer").bind("invalid-form.validate", function(e, validator) { 
    var err = validator.numberOfInvalids(); 
    if (err) { 
    container.html("THERE ARE "+ err + " ERRORS IN THE FORM") 
    container.show(); 
    } else { 
    container.hide(); 
    } 
}).validate({ ... }) 

Answer 4

Önce konteyner .. Bir sınıfın yerine bir kimlik kullanıyor olmalıdır (Ben bu kimliği kabul edeceğim 'containererreurtotal' dir)

O zaman bu deneyin ..

$().ready(function() { 

     $('div#containererreurtotal').hide(); 

     // validate signup form on keyup and submit 
     $("#frmEnregistrer").validate({ 
      errorLabelContainer: "#containererreurtotal", 
      wrapper: "p", 
      errorClass: "error", 
      rules: { 
       nickname_in: { required: true, minLength: 4 }, 
       prenom_in: { required: true, minLength: 4 }, 
       nom_in: { required: true, minLength: 4 }, 
       password_in: { required: true, minLength: 4 }, 
       courriel_in: { required: true, email: true }, 
       userdigit: { required: true } 
      }, 
      messages: { 
       nickname_in: { required: "Nickname required!", minLength: "Nickname too short!" }, 
       prenom_in: { required: "Prenom required!", minLength: "Prenom too short!" }, 
       nom_in: { required: "Nom required!", minLength: "Nom too short!" }, 
       password_in: { required: "Password required!", minLength: "Password too short!" }, 
       courriel_in: { required: "Courriel required!", email: "Courriel must be an Email" }, 
       userdigit: { required: "UserDigit required!" } 
      }, 
      invalidHandler: function(form, validator) { 
       $("#containererreurtotal").show(); 
      }, 
      unhighlight: function(element, errorClass) { 
       if (this.numberOfInvalids() == 0) { 
        $("#containererreurtotal").hide(); 
       } 
       $(element).removeClass(errorClass); 
      }  

     }); 
    }); 

Ben Burada, tek tek her bir hata hakkında bir <p> etiketinin istediğinizi varsayarsak. Tipik olarak, I (bu eleman "sargı" doğrultusunda belirtilen)

Eğer esas kaba (biri yerine kullanılan div 'containererreurtotal' olarak adlandırılır) ve her bir hata için bir <li> için <ul> kap kullanın #containererreurtotal değerini ekran olarak belirt: none; CSS'nizde, o zaman hazır işlevinde ilk satırı ihtiyacım yok ($ ('div # containererreurtotal')) (gizlemek;.) Ben biraz daha farklı bir çözüme sahip

Answer 5

: Ben çözüldü

jQuery(document).ready(function() { 
    var submitted = false; 
    var validator = jQuery("#emailForm").validate({ 
     showErrors: function(errorMap, errorList) { 
      if (submitted) { 
       var summary = ""; 
       jQuery.each(errorList, function() { 
       summary += "<li><label for='"+ this.element.name; 
       summery += "' class='formError'>" + this.message + "</label></li>"; }); 
       jQuery("#errorMessageHeader").show(); 
       jQuery("#errorMessageHeader").children().after().html(summary); 
       submitted = false; 
      } 
      this.defaultShowErrors(); 
     },   
     invalidHandler: function(form, validator) { submitted = true; }, 
     onfocusout: function(element) { this.element(element); }, 
     errorClass: "formError", 
     rules: { 
      //some validation rules 
     }, 
     messages: { 
      //error messages to be displayed 
     }   
    }); 
}); 

Answer 6

aşağıdaki kısa kodla bu sorun: Yani

<table> 
    <tr> 
     <td>Name:</td> 
     <td><input type="text" name="name"></td> 
    </tr> 
</table> 

:

errorElement: "td", 
errorPlacement: function (error, element) { 
    error.insertAfter(element.parent()); 
} 

Benim yapısı şudur Benim hataları artık benim <input>