Dapatkah saya menandai bidang tidak valid dari javascript?


94

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?


Anda selalu dapat menggandakan dengan kelas "tidak valid", tetapi akan sangat menarik untuk mengetahui bahwa ada cara yang lebih baik.
Pointy

1
Ya, tentu saja, tapi itu akan membosankan;)
Svish

1
Svish, bisakah Anda mengevaluasi kembali jawaban di bawah ini? Sepertinya dajavax memberikan jawaban yang sesuai dengan keinginan Anda. Mungkin bermanfaat bagi pengunjung lain jika Anda menandai jawaban dajavax sebagai jawaban yang diterima.
Kodos Johnson

@KodosJohnson Jelas, terima kasih untuk kepala up 🙂
Svish

Jawaban:


160

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.



4
Selain itu, jika Anda ingin pesan validitas browser muncul inputatau blurAnda dapat menggunakan field.reportValidity () setelahnya.
Sam Carlton

4

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.


9
Anda sepenuhnya benar, tetapi saya rasa Anda tidak memahami pertanyaan itu sepenuhnya. Di HTML5, ada berbagai cara untuk menambahkan nilai atribut ke markup HTML yang menyiratkan aturan validasi bawaan. Saat browser menerapkan aturan tersebut, kolom input akan cocok dengan pseudo-class ": valid" atau ": invalid" di CSS. Dengan demikian, Anda dapat menulis HTML dengan atribut tersebut, dan CSS dengan pemilih ": valid" dan ": invalid" dengan aturan, dan memberikan masukan visual tanpa JavaScript sama sekali. Pertanyaannya adalah apakah status ": valid" tersedia sebagai atribut DOM, pada dasarnya.
Pointy

-17

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.


Apa maksudmu kamu tidak bisa menatanya? Saya sudah melakukannya. 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)
Svish

11
"Adakah cara untuk menandai bidang masukan sebagai tidak valid / valid dari javascript?" "Sayangnya, Anda tidak dapat mengatur gaya kelas semu dari JavaScript" Bukan itu pertanyaan yang diajukan.
mikemaccana

Anda harus dapat menggunakan CSSOM untuk mendefinisikan kelas baru dengan kelas semu secara dinamis ...
Brett Zamir
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.