Dari membaca posting ini saya telah menemukan bahwa ada beberapa kelas pseudo untuk nilai input 'valid' dan 'tidak valid' yang diperkenalkan ke HTML5.
Apakah ada cara untuk menandai kolom input sebagai tidak valid / valid dari javascript? Atau sebagai alternatif, dapatkah saya mengganti metode validasi yang digunakan?
Jawaban:
Anda dapat menggunakan fungsi customValidity untuk tujuan ini.
Jika Anda menambahkan pesan customValidity ke bidang, itu menjadi tidak valid. Ketika Anda mengatur pesan sebagai string kosong, itu menjadi valid lagi (kecuali tidak valid karena alasan lain).
field.setCustomValidity("Invalid field."); akan membuat field tidak valid.
field.setCustomValidity(""); akan membuat bidang valid kecuali jika gagal dalam batasan HTML5.
inputatau blurAnda dapat menggunakan field.reportValidity () setelahnya.
Edit : Seseorang mengklarifikasi bahwa Anda mencari atribut "valid" "tidak valid" untuk DOM.
Saya akan menambahkan atribut ke setiap tag menggunakan dom_object.setAttribute("isvalid", "true"). Anda juga dapat memiliki fungsi validasi pusat yang memperbarui atribut ini setiap kali (dan digunakan dom_object.getAttribute("isvalid")setiap saat).
Anda dapat menjalankan fungsi ini setiap kali elemen kehilangan fokus, atau kapan pun Anda mau.
Tidak terlalu elegan, tapi sayangnya tidak ada dukungan "palsu" dengan javascript dan HTML5 sekarang.
Jika saya mengerti pertanyaan Anda, Anda dapat melakukan validasi dengan Javascript. Namun, perlu diingat bahwa sangat mudah untuk menghindari validasi sisi klien, terutama validasi javascript . Anda tidak boleh mempercayai data klien dan selalu melakukan pemeriksaan di sisi server.
Misalnya, saya dapat dengan mudah menemukan ID elemen dengan memeriksa kode sumber, lalu document.getElementById('some_id').setAttribute('max', new_number)mengubah nilai maks (ini adalah salah satu entri dari tautan Anda).
Ada berbagai cara untuk melakukannya, jadi saya akan mencoba memberikan idiom umumnya.
Anda dapat mengambil nilainya dengan melakukan document.getElementById('form_element_id').value(pastikan Anda memberikan formulir nameyang dikirim ke server, dan idyang digunakan oleh javascript). Untuk textarea, Anda bisa menggunakan .innerHTML.
Kemudian Anda memiliki nilai dalam variabel, ada berbagai cara untuk memeriksanya.
Misalnya, Anda bisa melakukannya if (parseInt(my_value) < 0) //error. Anda juga bisa menggunakan ekspresi reguler, saya tidak akan menjelaskan semuanya tetapi Anda bisa mulai di sini http://www.w3schools.com/jsref/jsref_obj_regexp.asp . Saya tahu w3schools bukanlah sumber terbaik tetapi saya merasa ini tempat yang baik untuk memulai.
Sekarang untuk bagian validasi: tambahkan onsubmit="return validateForm()ke tag formulir Anda di mana validateForm () adalah fungsi yang melakukan semua pemeriksaan. Dan fungsinya hanya kembali truejika valid dan falsesebaliknya. Ini menggantikan fungsi validasi default (yang secara default tidak melakukan apa pun).
Jadi pada contoh di atas, //errorakan diganti dengan return false. Anda juga dapat melakukan hal-hal lain; seperti memperingatkan kesalahan lalu mengembalikan salah. Anda juga dapat menggunakan javascript untuk menyorot bidang yang tidak valid (tidak yakin apakah ini yang Anda maksud dengan " tandai bidang masukan sebagai tidak valid / valid dari javascript ")
Tentu saja, jika Anda tidak ingin memeriksa semua bidang, Anda hanya perlu mengembalikan true jika bidang tertentu lolos. Sekali lagi, Anda tidak boleh mengandalkan ini, tetapi jika Anda hanya ingin menghalangi orang biasa maka ini adalah solusi yang mudah.
Apakah ada cara untuk menandai kolom input sebagai tidak valid / valid dari javascript?
Sayangnya, Anda tidak dapat mengatur gaya kelas semu di JavaScript, karena itu bukan elemen nyata, mereka tidak ada di DOM sebenarnya.
Dengan vanilla JavaScript Anda akan menggunakan API validasi .
Di jQuery Anda cukup melakukan ini, http://jsfiddle.net/elclanrs/Kak6S/
if ( $input.is(':invalid') ) { ... }
Atau sebagai alternatif, dapatkah saya mengganti metode validasi yang digunakan?
Jika Anda menggunakan validasi HTML5, tetap gunakan markup. Jika tidak, Anda dapat menonaktifkan validasi HTML5 dengan $form.attr('novalidate', 'novalidate')dan menggunakan JS untuk memvalidasi bidang Anda, dan kemudian menambahkan kelas validatau invalidjika diperlukan. Saya membuat plugin yang berfungsi seperti ini untuk mendukung browser non HTML5.
input:invalid + label::after{content: " INVALID";color: red;}Menambahkan potongan merah teks INVALID setelah label yang saya miliki di sebelah bidang input jika bidang tersebut tidak valid (misalnya jika bidang email memiliki email yang tidak valid di dalamnya)