làm thế nào để xóa lỗi khi sử dụng jquery xác nhận và tùy chỉnh errorPlacement

Question

Tôi đang sử dụng jquery và xác thực để xác nhận biểu mẫu của tôi. Thay vì thêm một yếu tố để các lĩnh vực còn thiếu tôi thêm một biên giới đến các yếu tố sử dụng tùy chọn này errorPlacement

$("#signup-form").validate({ 
     submitHandler: function(form) { 
     form.submit(); 
    }, 
    errorPlacement: function(error, element) { 
     element.css("border", "solid 1px red"); 
    }      
}); 

một điều tôi dường như không thể hình dung ra là làm thế nào để xóa nó khi hợp lệ?

Vì vậy, tôi đã bắt đầu với mã ở trên. Sau đó thử và tôi đang bối rối với kết quả. Nếu tôi không có tùy chọn success: khi một trường không thành công, nó sẽ thêm lớp thành công. Nhưng ngay sau khi tôi thêm tùy chọn success, tất cả các trường bắt buộc đều nhận được lớp đó và nếu tôi kiểm tra phần tử tôi thấy <input class="required invalid valid"> vì vậy tôi đang làm điều gì đó không chính xác.

  $("#signup-form").validate({ 
       submitHandler: function(form) { 
        // do other stuff for a valid form 
        //form.submit(); 
       }, 
       errorPlacement: function(error, element) { 
        element.addClass("invalid"); 
       },   
       success: function(error) { 
        // change CSS on your element(s) back to normal 
       },      
       debug:true 
      }); 

Answer 1

Bạn có thể thử thêm này vào danh sách các tùy chọn .validate() ...

success: function(error) { 
    // change CSS on your element(s) back to normal 
} 

này nên hoạt động tự động mà không có một hình thức nộp. Ngay khi lỗi được giải quyết, mã được chứa sẽ chạy.

Xem documentation.

Vui lòng tạo bản trình diễn sự cố của bạn bằng jsFiddle. Đây là a blank jsFiddle với .validate() đã được bao gồm và sẵn sàng để sử dụng.

---

EDIT

Theo OP's jsFiddle, tôi đã thực hiện những thay đổi này ...

errorPlacement: function(error, element) { 
     $(element).filter(':not(.valid)').addClass("invalid"); 
    }, 
    success: function(error) { 
     console.log(error); 
     $("#signup-form").find('.valid').removeClass("invalid"); 
    } 

Working Demo:http://jsfiddle.net/u3Td3/6/

Side-ghi chú: Bạn cũng có đã có một số HTML ues. Bạn nên "tự đóng" các thành phần input của mình với />. Điều tương tự cho nút gửi, tự đóng chứ không phải sử dụng </input>. Xem validator.w3.org để xác thực HTML của bạn. Tôi cũng không sử dụng table cho bố cục, sử dụng CSS.