jQuery Doğrulama Eklentisi: Onfocusout, keyup olduğunda errorPlacement işlevini çağırır ve

Question

'u tıklatırım jquery doğrulama eklentisini kullanıyorum ve errorPlacement işlevini, field title özniteliğine hata iletileri eklemek ve yalnızca alanın yanında görüntülemek için kullanmak istiyorum. form gönderme düğmesi ile gönderildiğinde ancak aşağıdaki olaylardan herhangi tetiklendiğinde

Bu harika çalışıyor: - onfocusout - tıklayın - onkeyup

doğrulama kontrolleri çalıştırılır

ama errorPlacement işlevini atlar ve varsayılan davranış gibi alandan sonra tam hata mesajını ekler.

Aşağıdaki kodu kullanıyorum:

$("#send-mail").validate({ 
    debug: true, 
    // set this class to error-labels to indicate valid fields 
    success: function(label) { 
     // set text as tick 
     label.html("✔").addClass("valid"); 
    }, 
    // the errorPlacement has to take the table layout into account 
    errorPlacement: function(error, element) { 
     console.log("errorPlacement called for "+element.attr("name")+" field"); 
     // check for blank/success error 
     if(error.text() == "") 
     { 
      // remove field title/error message from element 
      element.attr("title", ""); 
      console.log("error check passed"); 
     } 
     else 
     { 
      // get error message 
      var message = error.text(); 

      // set as element title 
      element.attr("title", message); 

      // clear error html and add cross glyph 
      error.html("✘"); 

      console.log("error check failed: "+message); 
     } 
     // add error label after form element 
     error.insertAfter(element); 
    }, 
    ignoreTitle: true, 
    errorClass: "invalid" 
}); 

Answer 1

Senin sorunun eklenti yalnızca doğrulanır her element için bir kez errorPlacement işlevini çağırır olmasıdır. Yani, öğe için hata etiketi ilk oluşturulduğunda. Daha sonra eklenti, zaten mevcut olan etiketi tekrar kullanır ve içerideki html'yi değiştirir (veya öğe geçerliyse, hata etiketini gizler). Bu yüzden haçlarınız giderilir ve gerçek hata mesajı gösterilir.

Eklentinin akışının net olduğundan emin olmak için.

1. eleman (henüz hiçbir errorlabel)
2. eleman eklenti hata etiketi oluşturur ve errorPlacement fonksiyon
3. eleman "çapraz" (başlığında hata mesajı)
4. Eleman alır çağıran
5. bir noktada valide alır odak ve bir şeyleri değiştir
6. eklentisi revalidates element
7. Bu hata etiketinin oluşturulduğunu gördü (ve yerleştirildi)
8. eklenti sadece Dolayısıyla bunu sorun eklenti hata etiketlerin bazıları gereksiz eklemeler/silen kurtarmak için yaptığı optimizasyon bir tür bkz label.html(message) yerine eski etiketinin kaldırılması ve ona

readding ait çağırır. Hangisi de mantıklı.

Sen işlevinde doğrulama-eklenti-sourcecode

jquery.validate.js v1.6 çek de showLabel hatları ilgili parçalar için 617-625 bakarak söylediklerini kontrol edebilirsiniz. Ek kaba kuvvet ile sorunu çözer özel bir showErrors geri arama temin etmek üzere

---

olası bir çözüm olabilir.

$("#send-mail").validate({ 
... 
    showErrors: function(errorMap, errorList) { 
     for (var i = 0; errorList[i]; i++) { 
      var element = this.errorList[i].element; 
      //solves the problem with brute force 
      //remove existing error label and thus force plugin to recreate it 
      //recreation == call to errorplacement function 
      this.errorsFor(element).remove(); 
     } 
     this.defaultShowErrors(); 
    } 
... 
}); 

çizgisinde

şey Belki bu daha temiz bir çözüm vardır ama bunu yapmak ve daha iyi bir çözüm araştırmak için zaman vermelidir.

Answer 2

sayesinde bazı etrafında kazma yapılır ve aynı sorunu buldum

seğirme.

jquery.validation.js dosyasındaki showLabel işlevini "kesmek" ile çalışmayı başardım. Güzel değil ama çalışıyor.

showErrors işlevinin geçersiz kılınması seçeneği eklenti kodunu değiştirmeme engel olur, böylece bir göz atacağım. İşte

Ben showLabel yöntemi için kullanılan kod:

 showLabel: function(element, message) { 

      // look for existing error message 
      var label = this.errorsFor(element); 
      // existing error exist? 
      if (label.length) { 
       // refresh error/success class 
       label.removeClass().addClass(this.settings.errorClass); 

       // check if we have a generated label, replace the message then 
       label.attr("generated"); 

       // is message empty? 
       if(!message) 
       { 
        // add tick glyph 
        label.html("✔"); 

        // wipe element title 
        $(element).attr('title', message) 
       } 
       else 
       { 
        // clear error html and add cross glyph 
        label.html("✘"); 

        // update element title 
        $(element).attr('title', message) 
       } 

       // && label.html(message); 
      } 
      else { 
       // create label 
       label = $("<" + this.settings.errorElement + "/>") 
        .attr({"for": this.idOrName(element), generated: true}) 
        .addClass(this.settings.errorClass) 
        .html(message || ""); 
       if (this.settings.wrapper) { 
        // make sure the element is visible, even in IE 
        // actually showing the wrapped element is handled elsewhere 
        label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent(); 
       } 
       if (!this.labelContainer.append(label).length) 
        this.settings.errorPlacement 
         ? this.settings.errorPlacement(label, $(element)) 
         : label.insertAfter(element); 
      } 
      if (!message && this.settings.success) { 
       label.text(""); 
       typeof this.settings.success == "string" 
        ? label.addClass(this.settings.success) 
        : this.settings.success(label); 
      } 
      this.toShow = this.toShow.add(label); 
     }