Memahami Masalah
Isu ini timbul apabila cuba menggunakan kelas pengesahan pada kotak teks dinamik dalam jadual. Matlamatnya adalah untuk melaksanakan pengesahan pada kotak teks ini apabila butang "Simpan" diklik.
Penyelesaian
Untuk menyelesaikan isu ini, langkah berikut perlu dilaksanakan:
-
Sertakan Atribut Data-val: Berikan yang perlu atribut data-val ke kotak teks, bersama-sama dengan elemen pemegang tempat untuk mesej pengesahan. Atribut ini penting untuk pengesahan pihak klien menggunakan jquery.validate.unobtrusive.js.
-
Objek ClsTargetInfo Lalai Awal: Mulakan dengan menambahkan objek ClsTargetInfo lalai pada sifat TargetInfo dalam model anda dan jana HTMLnya dalam paparan.
-
Buat a Elemen Tersembunyi untuk Pengindeks: Dalam baris jadual, sertakan elemen input tersembunyi untuk pengindeks. Ini membolehkan pengindeks bukan berturut-turut disiarkan dan terikat pada koleksi.
-
Salin Templat HTML: Periksa HTML yang dijana untuk baris jadual. Salin di dalam elemen tersembunyi yang diletakkan di luar teg borang, menggantikan semua pengindeks dengan aksara tiruan (#).
-
Klon dan Tambah pada Jadual: Dalam kod JavaScript, klon baris baharu , kemas kini pengindeks dan tambahkannya pada jadual.
-
Reparse Validator: Selepas menambah baris baharu, susun semula pengesah menggunakan $.validator.unobtrusive.parse(form).
Nota Tambahan
- Pengesahan tidak mengganggu bergantung pada penghuraian atribut data-val pada pemaparan awal borang. Oleh itu, penghuraian semula diperlukan apabila menambah kandungan dinamik.
- Input tersembunyi untuk pengindeks membenarkan pemadaman mana-mana baris dalam koleksi.
- Pertimbangkan untuk menggunakan CSS dan bukannya gaya sebaris untuk kebolehselenggaraan yang lebih baik dan prestasi.
- Gunakan pandangan separa (pembantu BeginCollectionItem) untuk kebolehselenggaraan yang lebih mudah apabila menambah baris semata-mata di pihak pelanggan.
Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Pengesahan Bahagian Klien pada Kotak Teks Ditambah Secara Dinamik dalam Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!