Cách hiển thị vùng chứa lỗi Xác thực jQuery chỉ khi gửi

Question

Tôi đang cố gắng thực hiện tác vụ Validation plugin. Nó hoạt động tốt cho các trường riêng lẻ, nhưng khi tôi cố gắng bao gồm mã trình diễn cho vùng chứa lỗi chứa tất cả các lỗi, tôi có một vấn đề. Vấn đề là nó hiển thị vùng chứa với tất cả các lỗi khi tôi ở trong tất cả các trường, nhưng tôi chỉ hiển thị vùng chứa lỗi khi người dùng nhấn nút gửi (nhưng vẫn hiển thị lỗi nội tuyến bên cạnh điều khiển khi mất tiêu điểm).

Sự cố là thư trong vùng chứa. Khi tôi lấy mã như được đề cập trong câu trả lời bên dưới cho vùng chứa, đầu ra vùng chứa chỉ hiển thị số lỗi trong văn bản thuần túy.

Bí quyết để nhận danh sách thông báo lỗi chi tiết là gì? Điều tôi muốn là hiển thị "L ERI" bên cạnh điều khiển do lỗi khi người dùng nhấn nút tab và để có bản tóm tắt mọi thứ ở cuối khi anh ta nhấn gửi. Điều đó có thể không?

Mã với tất cả các đầu vào từ đây:

$().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

Bạn sẽ tìm thấy các tài liệu hướng dẫn cho các tùy chọn meta trong http://docs.jquery.com/Plugins/Validation/validate#toptions

Nếu bạn muốn hiển thị các lỗi bên cạnh các đầu vào VÀ trong một vùng chứa lỗi riêng biệt, bạn sẽ cần phải ghi đè cuộc gọi lại errorPlacement.

Từ ví dụ của bạn:

... 
        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" 
    }); 
... 

Tham số error là một đối tượng jQuery chứa một thẻ <label>. Tham số element là đầu vào đã không xác thực.

Cập nhật thành nhận xét

Với mã ở trên, vùng chứa lỗi sẽ không xóa lỗi vì chứa bản sao nhân bản. Thật dễ dàng để giải quyết vấn đề này nếu jQuery đưa ra một sự kiện "ẩn", nhưng nó không tồn tại. Hãy thêm một sự kiện ẩn!

1. Đầu tiên chúng ta cần các AOP plugin

2. Chúng tôi thêm một lời khuyên đối với phương pháp ẩn:

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

3. Chúng ràng buộc sự kiện ẩn để ẩn các lỗi nhân bản:

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

Tặng thử

Answer 2

Tôi không biết nếu các plugin xác nhận cung cấp tùy chọn cho điều này, nhưng có thể bạn có thể sử dụng tiêu chuẩn jQuery để đạt được những gì bạn muốn. Hãy chắc chắn rằng bạn đang chứa ban đầu được ẩn, bằng cách thiết lập các phong cách hiển thị không ai sánh kịp:

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

Sau đó, bạn có thể hookup một sự kiện onsubmit mẫu mà sẽ làm cho các thùng chứa có thể nhìn thấy ngay sau khi một nỗ lực được thực hiện để nộp biểu mẫu:

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

Hy vọng rằng việc kết hợp với mã hiện tại của bạn sẽ thực hiện thủ thuật.

Answer 3

tôi sẽ loại bỏ các errorContainer và sau đó đánh chặn xác nhận trên postback và ở đó thêm một container lỗi bằng tay như thế này:

$("#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

Đầu container của bạn nên sử dụng một ID thay vì một lớp học .. (Tôi sẽ giả định ID đó là 'containererreurtotal')

Sau đó Hãy thử điều này ..

$().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); 
      }  

     }); 
    }); 

Tôi giả sử ở đây bạn muốn có một thẻ <p> xung quanh từng lỗi riêng lẻ. Thông thường tôi sử dụng một <ul> container cho container thực tế (thay vì div bạn sử dụng gọi là 'containererreurtotal') và một <li> cho mỗi lỗi (yếu tố này được quy định trong "wrapper" line)

Nếu bạn chỉ định #containererreurtotal làm display: none; trong CSS của bạn, sau đó bạn không cần phải dòng đầu tiên trong hàm sẵn sàng ($ ('div # containererreurtotal') ẩn();).

Answer 5

tôi có một giải pháp hơi khác nhau:

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

tôi giải quyết vấn đề này với mã ngắn sau:

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

cấu trúc của tôi là như sau:

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

Vì vậy, lỗi của tôi bây giờ sẽ được hiển thị trực tiếp trong một số <td> của tôi sau <input>