2012-12-17 27 views
15

Tôi đang sử dụng phiên bản hiện tại của jQuery (1.8.3) và phiên bản mới nhất của jQuery xác thực (1.10.0), và có vẻ như trong Internet Explorer 8, jquery validate đang xác nhận hợp lệ tất cả các yếu tố đầu vào trên biểu mẫu đang được xác thực, không chỉ những người có quy tắc được xác định. Nó hoạt động tốt trong các trình duyệt khác (IE9 +, FF, Chrome), và nó hoạt động tốt nếu tôi sử dụng jQuery validate 1.9.0.jQuery Validate plugin v1.10 xác nhận (yêu cầu) tất cả các đầu vào trong IE8

Dưới đây là một ví dụ chứng minh vấn đề:

<!DOCTYPE html> 

<html> 
<head> 
    <title>IE8 + jQuery Validate 1.10 Test</title> 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script> 
    <script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js'></script> 
</head> 
<body> 
    <div> 
     <form id="my-form"> 
      <label for="my-required-field">required:</label> 
      <input id="my-required-field" type="text" name="reqField" /> 
      <label for="my-optional-field">optional:</label> 
      <input id="my-optional-field" type="text" name="optField" /> 
      <input id="wh-submit-button" type="submit" value="submit" /> 
     </form> 
    </div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      var form = $("#my-form"); 
      var validator = form.validate({ 
       rules: { 
        "reqField": { required: true } 
       }, 
       messages: { 
        "reqField": { required: "this field is <i>actually</i> required" } 
       } 
      }); 

      $("#wh-submit-button").click(function() { 
       if (validator.form()) { 
        alert('passed validation'); 
       } 
      }); 
     }); 
    </script> 
</body> 
</html> 

Trong IE8, các "xác nhận thông qua" cảnh báo sẽ không chớp, và các lĩnh vực tùy chọn sẽ được đánh dấu theo yêu cầu.

Nếu tôi một cách rõ ràng đánh dấu lĩnh vực bắt buộc như không cần thiết, nó không hoạt động chính xác:

rules: { 
    "reqField": { required: true }, 
    "optField": { required: false } 
} 

Tuy nhiên, nó chắc chắn không tối ưu phải đánh dấu tất cả các yếu tố đầu vào mà không được yêu cầu một cách rõ ràng như tùy chọn, và rằng chưa bao giờ là yêu cầu trước đó, theo như tôi biết.

Tôi biết rằng đã xảy ra sự cố với các phiên bản jquery và jquery đã được xác thực trước đó, nhưng chúng được giải quyết một cách bề ngoài với jQuery xác thực 1.8.1 - Tôi đang nêu vấn đề này vì có vẻ như với các phiên bản mới nhất của jquery và xác thực plugin.

UPDATE:

Vì vậy, vấn đề chỉ xuất hiện đơm hoa kết trái khi sử dụng các công cụ phát triển F12 Internet Explorer để bắt chước hành vi của IE8. Dựa trên bình luận cho thấy rằng không có vấn đề thực tế với mẫu tôi đã cung cấp trong IE8, tôi đã xây dựng một máy ảo Windows hoàn chỉnh với cài đặt Internet Explorer 8 thực sự, và trên thực tế, không có vấn đề gì. Mặc dù có sự khác biệt rõ ràng giữa trình giả lập và thực tế, tôi chưa bao giờ thấy vấn đề như vậy với giả lập JavaScript trước đây và được ném bởi thực tế là nó đột nhiên bắt đầu xảy ra với jQuery Validation 1.10.

Vì nó chỉ là một vấn đề với mô phỏng, không phải là thực tế, không có gì để giải quyết ở đây; và tôi nên tiết lộ rằng nó đã được thông qua giả lập ở nơi đầu tiên ... nhưng có lẽ một người nào khác sẽ rơi vào cùng một cái bẫy và điều này sẽ là một tài liệu tham khảo hữu ích.

+0

mã này hoạt động tốt đối với tôi trong IE8 http://jsfiddle.net/BGDfr/1/ – charlietfl

+1

không chắc chắn lý do tại sao bạn sử dụng trình xử lý nhấn nút gửi để gọi 'form()' có thể xem xét sử dụng gọi lại 'submitHandler' insted – charlietfl

+1

@charlietf gì Tôi nói. Plugin 'validate()' đã có 'submitHandler:' được tích hợp sẵn cho việc này. Bằng cách sử dụng trình xử lý nhấp chuột của riêng bạn, bạn đang khởi tạo lại plugin trên biểu mẫu không cần thiết. Tôi đã nhìn thấy nhiều tình huống mà điều này gây ra tất cả các loại vấn đề lạ như phải nhấp vào nút hai lần, v.v. – Sparky

Trả lời

0

Hãy thử thay ...

jsFiddle DEMO using built-in jQuery 1.8.2

jsFiddle DEMO using jQuery 1.8.3

$(document).ready(function() { 

    var form = $("#my-form"); 
    var validator = form.validate({ 
     rules: { 
      "reqField": { 
       required: true 
      } 
     }, 
     messages: { 
      "reqField": { 
       required: "this field is <i>actually</i> required" 
      } 
     }, 
     submitHandler: function(form) { 
      alert('passed validation'); 
      // form.submit(); 
     } 
    }); 

});​ 
+0

Dường như không có sự khác biệt cho dù trình submitHandler có được sử dụng hay không - nó không thành công như nhau trong trình giả lập, và thành công như nhau trong một IE8 thực. Tôi không làm theo các điểm khởi tạo lại các plugin khi không sử dụng submitHandler (điểm từ bình luận của bạn ở trên). Trong mọi trường hợp, trường hợp "thực tế" của tôi không gửi biểu mẫu - tôi chỉ cần kiểm tra tính hợp lệ của nó trước khi thực hiện một hành động khác ... vì vậy, tôi nghĩ rằng submitHandler không hoàn toàn là phương thức tiện lợi phù hợp. –

+0

@KentMcNeill, Nếu bạn chỉ cần kiểm tra tính hợp lệ của biểu mẫu, đó là phương thức '.valid()'. 'if (form.valid())', vv Tất nhiên, nếu bạn đang kiểm tra tính hợp lệ khi nhấp vào nút 'submit' thực sự, đó là những gì' submitHandler: 'là vì, vì nó chỉ kích hoạt khi có hiệu lực. Và mỗi khi bạn gọi '.validate()', bạn khởi tạo lại xác thực trên biểu mẫu ... một lần nữa, như tôi đã giải thích, tôi đã thấy nhiều vấn đề kỳ lạ được báo cáo ở đây là do thực hành kém này gây ra. Chỉ cần tìm kiếm các câu trả lời đã đăng/được chấp nhận của tôi để xem ít nhất nửa tá. – Sparky

Các vấn đề liên quan