Vô hiệu hóa xác thực các thành phần của biểu mẫu HTML5

Trong các biểu mẫu của tôi, tôi muốn sử dụng các loại biểu mẫu HTML5 mới, ví dụ <input type="url" />( thông tin thêm về các loại ở đây ).

Vấn đề là Chrome muốn trở nên siêu hữu ích và xác thực các yếu tố này cho tôi, ngoại trừ việc nó hút vào nó. Nếu nó không xác thực được tích hợp sẵn, sẽ không có thông báo hoặc dấu hiệu nào ngoài yếu tố lấy nét. Tôi điền trước các thành phần URL "http://"và vì vậy, xác thực tùy chỉnh của riêng tôi chỉ coi các giá trị đó là các chuỗi trống, tuy nhiên Chrome từ chối điều đó. Nếu tôi có thể thay đổi quy tắc xác nhận của nó, điều đó cũng sẽ hoạt động.

Tôi biết tôi chỉ có thể quay lại sử dụng type="text"nhưng tôi muốn các cải tiến tốt đẹp sử dụng các ưu đãi loại mới này (ví dụ: nó tự động chuyển sang bố trí bàn phím tùy chỉnh trên thiết bị di động):

Vì vậy, có cách nào để tắt hoặc tùy chỉnh xác nhận tự động?

Nếu bạn muốn tắt xác thực phía máy khách cho một biểu mẫu trong HTML5, hãy thêm thuộc tính novalidate vào thành phần biểu mẫu. Ví dụ:

<form method="post" action="/foo" novalidate>...</form>

Xem https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

Tôi đã đọc thông số kỹ thuật và đã thực hiện một số thử nghiệm trong Chrome và nếu bạn bắt gặp sự kiện "không hợp lệ" và trả về sai dường như cho phép gửi biểu mẫu.

Tôi đang sử dụng jquery, với HTML này.

// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

Tôi chưa thử nghiệm điều này trong bất kỳ trình duyệt nào khác.

Tôi chỉ muốn thêm rằng việc sử dụng thuộc tính novalidate trong biểu mẫu của bạn sẽ chỉ ngăn trình duyệt gửi biểu mẫu. Trình duyệt vẫn đánh giá dữ liệu và thêm các lớp giả: hợp lệ và: không hợp lệ.

Tôi phát hiện ra điều này bởi vì các lớp giả hợp lệ và không hợp lệ là một phần của biểu định kiểu soạn sẵn HTML5 mà tôi đang sử dụng. Tôi vừa xóa các mục trong tệp CSS có liên quan đến các lớp giả. Nếu ai tìm thấy giải pháp khác xin vui lòng cho tôi biết.

Giải pháp tốt nhất là sử dụng kiểu nhập văn bản và thêm thuộc tính inputmode = "url" để cung cấp các tiện ích bàn phím URL. Đặc tả HTML5 đã được nghĩ cho mục đích này. Nếu bạn giữ type = "url", bạn sẽ nhận được xác thực cú pháp không hữu ích trong mọi trường hợp (tốt hơn là kiểm tra xem nó có trả về lỗi 404 thay vì cú pháp khá dễ dãi và không giúp ích nhiều).

Bạn cũng có khả năng ghi đè mẫu mặc định bằng mẫu thuộc tính = "https ?: //.+" chẳng hạn để dễ dàng hơn.

Đặt thuộc tính novalidate vào biểu mẫu không phải là câu trả lời đúng cho câu hỏi được hỏi vì nó loại bỏ xác thực cho tất cả các trường trong biểu mẫu và bạn có thể muốn giữ xác thực cho các trường email chẳng hạn.

Sử dụng jQuery để vô hiệu hóa xác nhận cũng là một giải pháp tồi vì nó hoàn toàn hoạt động mà không cần JavaScript.

Trong trường hợp của tôi, tôi đặt một phần tử chọn có 2 tùy chọn (http: // hoặc https: //) trước khi nhập URL vì tôi chỉ cần các trang web (và không có ftp: // hoặc những thứ khác). Bằng cách này, tôi tránh nhập tiền tố kỳ lạ này (điều hối tiếc lớn nhất của Tim Berners-Lee và có thể là nguồn chính của lỗi cú pháp URL) và tôi sử dụng một kiểu nhập văn bản đơn giản với inputmode = "url" với trình giữ chỗ (không có HTTP). Tôi sử dụng jQuery và tập lệnh phía máy chủ để xác thực sự tồn tại thực sự của trang web (không có 404) và để loại bỏ tiền tố HTTP nếu được chèn (tôi tránh sử dụng một mẫu như mẫu = "^ ((? Http).) * $" để tránh đặt tiền tố bởi vì tôi nghĩ tốt hơn là nên cho phép hơn)

Thay vì cố gắng thực hiện một kết thúc chạy xung quanh xác thực của trình duyệt, bạn có thể đặt http://văn bản dưới dạng giữ chỗ. Đây là từ chính trang bạn đã liên kết:

Văn bản giữ chỗ

Cải tiến đầu tiên mà HTML5 mang đến cho các biểu mẫu web là khả năng đặt văn bản giữ chỗ trong trường nhập . Văn bản giữ chỗ được hiển thị bên trong trường đầu vào miễn là trường trống và không tập trung. Ngay khi bạn nhấp vào (hoặc tab đến) trường nhập, văn bản giữ chỗ sẽ biến mất.

Bạn có thể đã thấy văn bản giữ chỗ trước đây. Ví dụ: Mozilla Firefox 3.5 hiện bao gồm văn bản giữ chỗ trong thanh vị trí có thể đọc Dấu trang tìm kiếm và Lịch sử:

Khi bạn nhấp vào (hoặc tab để) thanh vị trí, văn bản giữ chỗ sẽ biến mất:

Trớ trêu thay, Firefox 3.5 không hỗ trợ thêm văn bản giữ chỗ vào các biểu mẫu web của riêng bạn. C'est la vie.

Hỗ trợ giữ chỗ

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

Đây là cách bạn có thể bao gồm văn bản giữ chỗ trong các biểu mẫu web của riêng bạn:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

Các trình duyệt không hỗ trợ placeholderthuộc tính sẽ đơn giản bỏ qua nó. Không có hại, không hôi. Xem trình duyệt của bạn có hỗ trợ văn bản giữ chỗ không .

Nó sẽ không giống hệt nhau vì nó sẽ không cung cấp "điểm khởi đầu" cho người dùng, nhưng ít nhất là ở giữa chừng.

Tôi đã tìm thấy một giải pháp cho Chrome với CSS bộ chọn sau đây mà không bỏ qua biểu mẫu xác minh gốc có thể rất hữu ích.

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

Bằng cách này, bạn cũng có thể tùy chỉnh tin nhắn của mình ...

Tôi đã nhận được giải pháp trên trang này: http://trac.webkit.org/wiki/Styling%20Form%20Controls

Chỉ cần sử dụng novalidate trong hình thức của bạn.

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

Chúc mừng !!!

Đây là chức năng tôi sử dụng để ngăn chrome và opera hiển thị hộp thoại nhập không hợp lệ ngay cả khi sử dụng novalidate.

window.submittingForm = false;
$('input[novalidate]').bind('invalid', function(e) {
    if(!window.submittingForm){
        window.submittingForm = true;
        $(e.target.form).submit();
        setTimeout(function(){window.submittingForm = false;}, 100);
    }
    e.preventDefault();
    return false;
});

bạn có thể thêm một số javascript để loại bỏ các bong bóng xác thực đáng ghét đó và thêm các trình xác nhận của riêng bạn.

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

Nếu bạn đánh dấu một phần tử biểu mẫu là required=""sau đónovalidate="" không giúp đỡ.

Một cách để phá vỡ requiredxác nhận là vô hiệu hóa phần tử .

Bạn có thể cài đặt tiện ích mở rộng chrome đơn giản và chỉ cần vô hiệu hóa xác thực khi đang di chuyển https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

theo mặc định, mọi thứ sẽ hoạt động như mặc định, nhưng bạn sẽ có thể tắt xác thực html5 chỉ bằng một cú nhấp chuột vào biểu tượng tiện ích mở rộng trên thanh công cụ