Nonaktifkan validasi elemen formulir HTML5

Di formulir saya, saya ingin menggunakan tipe formulir HTML5 baru, misalnya <input type="url" />( info lebih lanjut tentang jenis di sini ).

Masalahnya adalah Chrome ingin menjadi sangat membantu dan memvalidasi elemen-elemen ini untuk saya, kecuali bahwa itu menyebalkan. Jika gagal validasi bawaan, tidak ada pesan atau indikasi selain elemen mendapatkan fokus. Saya lebih suka elemen URL "http://", dan validasi khusus saya sendiri hanya memperlakukan nilai-nilai itu sebagai string kosong, namun Chrome menolaknya. Jika saya bisa mengubah aturan validasinya, itu akan berhasil juga.

Saya tahu saya bisa saja kembali menggunakan type="text"tetapi saya ingin perangkat tambahan yang bagus menggunakan penawaran jenis baru ini (mis.: Secara otomatis beralih ke tata letak keyboard khusus pada perangkat seluler):

Jadi, apakah ada cara untuk mematikan atau menyesuaikan validasi otomatis?

Jika Anda ingin menonaktifkan validasi sisi klien untuk formulir di HTML5, tambahkan atribut novalidate ke elemen formulir. Ex:

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

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

Saya telah membaca spesifikasi dan melakukan beberapa pengujian di Chrome, dan jika Anda menangkap peristiwa "tidak valid" dan mengembalikan false yang tampaknya memungkinkan pengiriman formulir.

Saya menggunakan jquery, dengan HTML ini.

// 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>

Saya belum menguji ini di browser lain.

Saya hanya ingin menambahkan bahwa menggunakan atribut novalidate di formulir Anda hanya akan mencegah browser mengirim formulir. Browser masih mengevaluasi data dan menambahkan kelas pseudo: valid dan: tidak valid.

Saya menemukan ini karena kelas pseudo yang valid dan tidak valid adalah bagian dari stylesheet boilerplate HTML5 yang telah saya gunakan. Saya baru saja menghapus entri dalam file CSS yang terkait dengan kelas pseudo. Jika ada yang menemukan solusi lain, beri tahu saya.

Solusi terbaik adalah dengan menggunakan input teks dan menambahkan atribut inputmode = "url" untuk menyediakan fasilitas keyboard URL. Spesifikasi HTML5 dianggap untuk tujuan ini. Jika Anda tetap mengetik = "url" Anda mendapatkan validasi sintaks yang tidak berguna dalam setiap kasus (lebih baik untuk memeriksa apakah ia mengembalikan kesalahan 404 daripada sintaks yang cukup permisif dan tidak banyak membantu).

Anda juga memiliki kemungkinan untuk mengganti pola default dengan pola atribut = "https?: //.+" misalnya menjadi lebih permisif.

Menempatkan atribut novalidate ke formulir bukan jawaban yang tepat untuk pertanyaan yang diajukan karena menghapus validasi untuk semua bidang dalam formulir dan Anda mungkin ingin tetap validasi untuk bidang email misalnya.

Menggunakan jQuery untuk menonaktifkan validasi juga merupakan solusi buruk karena harus benar-benar berfungsi tanpa JavaScript.

Dalam kasus saya, saya meletakkan elemen pilih dengan 2 opsi (http: // atau https: //) sebelum input URL karena saya hanya perlu situs web (dan tidak ada ftp: // atau hal lainnya). Dengan cara ini saya menghindari mengetikkan awalan aneh ini (penyesalan terbesar dari Tim Berners-Lee dan mungkin sumber utama kesalahan sintaksis URL) dan saya menggunakan input teks sederhana dengan inputmode = "url" dengan placeholder (tanpa HTTP). Saya menggunakan jQuery dan skrip sisi server untuk memvalidasi keberadaan nyata situs web (no 404) dan untuk menghapus awalan HTTP jika dimasukkan (saya menghindari menggunakan pola seperti pola = "^ ((? Http).) * $" untuk mencegah menempatkan awalan karena saya pikir lebih baik menjadi lebih permisif)

Alih-alih mencoba melakukan penghentian di sekitar validasi browser, Anda bisa menjadikan http://in sebagai teks placeholder. Ini dari halaman yang Anda tautkan:

Teks Placeholder

Perbaikan pertama yang dibawa HTML5 ke formulir web adalah kemampuan untuk mengatur teks placeholder di bidang input . Teks placeholder ditampilkan di dalam bidang input selama bidang tersebut kosong dan tidak fokus. Segera setelah Anda mengklik (atau tab untuk) bidang input, teks placeholder menghilang.

Anda mungkin pernah melihat teks placeholder sebelumnya. Misalnya, Mozilla Firefox 3.5 sekarang menyertakan teks placeholder di bilah lokasi yang bertuliskan "Cari Bookmark dan Riwayat":

Saat Anda mengklik (atau tab untuk) bilah lokasi, teks placeholder menghilang:

Ironisnya, Firefox 3.5 tidak mendukung penambahan teks placeholder ke formulir web Anda sendiri. C'est la vie.

Dukungan Placeholder

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

Inilah cara Anda bisa menyertakan teks placeholder dalam formulir web Anda sendiri:

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

Browser yang tidak mendukung placeholderatribut hanya akan mengabaikannya. Tidak ada salahnya, tidak busuk. Lihat apakah browser Anda mendukung teks placeholder .

Ini tidak akan persis sama karena tidak akan memberikan "titik awal" bagi pengguna, tapi setidaknya setengah jalan.

Saya menemukan solusi untuk Chrome dengan CSS pemilih berikut ini tanpa melewati formulir verifikasi asli yang bisa sangat berguna.

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

Dengan cara ini, Anda juga dapat menyesuaikan pesan Anda ...

Saya mendapat solusinya di halaman ini: http://trac.webkit.org/wiki/Styling%20Form%20Controls

Cukup gunakan novalidate di formulir Anda.

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

Bersulang!!!

Berikut adalah fungsi yang saya gunakan untuk mencegah chrome dan opera menampilkan dialog input yang tidak valid bahkan ketika menggunakan 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;
});

Anda dapat menambahkan beberapa javascript untuk mengatasi gelembung validasi yang menjengkelkan dan menambahkan validator Anda sendiri.

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);

Jika Anda menandai elemen formulir required=""saat novalidate=""itu tidak membantu.

Cara untuk menghindari requiredvalidasi adalah dengan menonaktifkan elemen .

Anda dapat memasang ekstensi krom sederhana dan cukup menonaktifkan validasi dengan cepat https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

secara default semuanya akan berfungsi sebagai default, tetapi Anda akan dapat menonaktifkan validasi HTML5 dengan satu klik pada ikon ekstensi pada toolbar