Cách không hiển thị phần tử lỗi dưới dạng nhãn có plugin jquery.validation

Question

Được rồi,

Tôi đã đọc qua tất cả các bài đăng và câu hỏi khác về plugin Xác thực jQuery và dường như chúng không có nội dung tôi đang tìm kiếm làm.

Tôi muốn lỗi hiển thị không hiển thị cùng với thông báo mà chỉ tạo đường viền màu đỏ xung quanh trường nhập.

Dưới đây là một số hình thức:

<form id="donate_form" name="checkoutForm" method="post"> 
    <label class="desc" id="title0" for="billing_name_first"> 
    Name 
    <span id="req_1" class="req">*</span> 
</label> 
<div> 
    <span class="left"> 
     <input name="billing.name.first" id="billing_name_first" type="text" class="field text required" value="" tabindex="1" /> 
     <label for="billing_name_first">First</label> 
    </span> 
    <span class="right"> 
     <input name="billing.name.last" id="billing_name_last" type="text" class="field text required" value="" tabindex="2" /> 
     <label for="billing_name_last">Last</label> 
    </span> 
</div> 

Tôi giả định rằng tôi cần phải đặt các lớp yêu cầu trên đầu vào ??

Sau đó, với CSS ẩn số label.error được plugin thoát ra? Tôi đã thử nhưng không đi.

Tôi có đang tìm đúng nơi không?

Cảm ơn!

Answer 1

Tôi hiểu những gì bạn đang cố gắng đạt được; Tôi đã có những yêu cầu tương tự nhưng đã có những khó khăn nghiêm trọng cố gắng để đạt được nó, nhưng tôi đã làm. Đây là cách:

1. Tôi tạo ra hai lớp phong cách CSS "errorHighlight" và "textinput", như vậy:

   .errorHighlight { border: 2px solid #CC0000; } .textinput {border: 1px silver solid;}

2. Tại thời gian thiết kế, tôi áp dụng các lớp "textinput" vào các trường nhập văn bản của tôi: <input type="text" class="textinput" />

3. Và sau đó trong cài đặt plugin xác thực biểu mẫu jQuery bên trong tệp Javascript của tôi, tôi đã thêm follo cánh thiết lập xác nhận chung của tất cả các hình thức trên trang này:

    $.validator.setDefaults({ 
         errorPlacement: function(error, element) { 
          $(element).attr({"title": error.text()}); 
         }, 
         highlight: function(element){ 
          //$(element).css({"border": "2px solid #CC0000"}); 
          $(element).removeClass("textinput"); 
          $(element).addClass("errorHighlight"); 
         }, 
         unhighlight: function(element){ 
          //$(element).css({"border": "2px solid #CC0000"}); 
          $(element).removeClass("errorHighlight"); 
          $(element).addClass("textinput"); 
         } 
        }); 
   

Bây giờ, bất cứ khi nào một cánh đồng không xác nhận, chức năng "highlight" callback được gọi là trên phần tử. Chức năng gọi lại "errorPlacement" ngăn hành động mặc định chèn nhãn sau trường nhập sai, thay vào đó nó gắn thông báo lỗi vào thuộc tính "title" của trường (có thể được sử dụng làm nguồn văn bản cho hiển thị chú giải công cụ) .

Hy vọng điều này sẽ hữu ích.

Answer 2

Tôi không biết nếu điều này là đúng cách để làm điều đó, nhưng chúng tôi sử dụng:

jQuery.validator.messages.required = ''; 

Đó ngăn chặn các thông báo lỗi và rời khỏi biên giới đầu vào.

Trên thực tế, jQuery Plugin điểm tài liệu đến một ví dụ mà thực hiện điều này, vì vậy tôi đoán đó là phương pháp được chấp nhận ..

tùy chỉnh hiển thị thông điệp: Không có thông điệp hiển thị cho các phương pháp cần thiết, chỉ cho loại-lỗi (như định dạng email sai); Bản tóm tắt được hiển thị ở trên cùng ("Bạn đã bỏ lỡ 12 trường. Chúng được đánh dấu bên dưới.")

Answer 3

Tất cả các giải pháp này dường như phức tạp hơn mức cần thiết. Đây là một giải pháp đơn giản. .error được thêm vào trường không hợp lệ theo mặc định. Vì vậy, điều đầu tiên chúng ta cần làm là phong cách của nó để nó làm thay đổi biên giới và nền cho sắc thái khác nhau của màu đỏ:

.error { 
    border-color: #cd0a0a !important; 
    background: #fef1ec !important; 
} 

Sau đó, trong JavaScript:

$(function() { 
    $("#donate_form").validate({ 
     errorPlacement: $.noop 
    }); 
}); 

Tùy chọn errorPlacement là như thế nào Plugin xác thực cho phép bạn ghi đè cách thông báo lỗi được đặt. Trong trường hợp này, chúng tôi chỉ đơn giản là làm cho nó không làm gì, và do đó không có thông báo lỗi được tạo ra.

Answer 4

Bạn có thể chỉ trích các thông báo lỗi trong errorPlacement: và thêm nó vào bất cứ điều gì bạn thích, như thế này:

errorPlacement: function(error, element) { 
    $('#error-div').html(error[0].innerHTML)//<-error[0].innerHTML is the error msg. 
} 

Answer 5

Hãy thử:

$(function() { 
    $("#donate_form").validate({ 
     errorPlacement: $.noop 
    }); 
});