ajax form
1.0.0
Formulir HTML tentang obat peningkat kinerja.
Catatan: Bentuk Ajax tidak terikat dengan Polimer. Faktanya, ini tidak memiliki ketergantungan sama sekali, tetapi seharusnya berfungsi dengan baik dengan Polymer atau pustaka elemen khusus lainnya. Jika Anda lebih suka menggunakan polyfill elemen kustom sederhana, ajax-form juga merupakan pilihan terbaik Anda.
<form> tradisional?Pengiriman formulir mengubah/memuat ulang halaman, dan mencegah hal ini dengan benar bukanlah hal yang mudah.
Anda tidak dapat mengirim header khusus dengan formulir yang dikirimkan.
Anda tidak dapat (dengan mudah) mengurai respons server setelah formulir dikirimkan.
Melacak formulir/bidang yang tidak valid secara terprogram membuat frustrasi.
Anda tidak dapat mengirim data formulir sebagai JSON.
Anda tidak memiliki kesempatan untuk menambah data yang dimasukkan pengguna secara terprogram sebelum dikirim ke server.
Elemen formulir khusus (seperti yang dibuat menggunakan spesifikasi komponen web) tidak dapat dikirimkan menggunakan <form> tradisional yang murni.
Elemen kustom ajax-form menambah <form> tradisional untuk menyediakan fitur tambahan dan memecahkan masalah yang tercantum di atas. Lihat halaman dokumentasi API untuk dokumentasi dan demo lengkap.
npm install ajax-form
Gunakan ajax-form sama seperti Anda menggunakan formulir tradisional, dengan pengecualian atribut is="ajax-form" yang diperlukan yang harus Anda sertakan dalam markup elemen <form> Anda. Karena ajax-form adalah komponen web, Anda mungkin perlu menyertakan polyfill komponen web, seperti webcomponents.js untuk memastikan browser yang tidak mengimplementasikan spesifikasi WC dapat menggunakan ajax-form. Bentuk Ajax tidak memiliki ketergantungan yang sulit.
Penggunaan ajax-form yang sangat sederhana terlihat seperti <form> normal, dengan tambahan atribut is :
<form is="ajax-form" action="my/form/handler" method="post"><label>Masukkan nama Anda: <input type="text" name="full_name"></label>.. .</form>
Lihat halaman dokumentasi API untuk dokumentasi dan demo lengkap.
Apakah Anda mengembangkan komponen web bidang formulir? Baca instruksi di bawah ini untuk memastikan bidang Anda terintegrasi dengan benar dengan ajax-form.
Komponen Anda akan terintegrasi dengan baik ke dalam formulir ajax asalkan elemen khusus Anda memperlihatkan properti value yang berisi nilai bidang saat ini. Jika ini tidak benar, bidang khusus Anda harus memastikan bidang formulir HTML asli adalah bagian dari DOM ringan. Dalam kedua kasus tersebut, elemen dengan properti value juga harus berisi atribut name . Pengguna/integrator Anda perlu memasukkan nilai yang sesuai untuk bidang ini.
Jika bidang khusus Anda menampilkan bidang formulir HTML asli di DOM ringan, maka tidak ada lagi yang perlu dilakukan - ajax-form akan menghormati validasi apa pun yang ditambahkan pengguna/integrator Anda ke bidang tersebut. Atribut pembatas HARUS ditempatkan pada bidang formulir HTML asli.
Jika bidang khusus Anda TIDAK mengekspos bidang formulir HTML asli di DOM ringan secara default, dan Anda ingin ajax-form mematuhi batasan validasi, maka Anda perlu menyertakan sedikit kode untuk memperhitungkan hal ini. Berikut langkah-langkah yang harus diikuti:
Tambahkan bidang <input type="text"> 0x0 buram ke DOM terang, tepat sebelum bidang Anda.
Tambahkan properti customElementRef ke input, dengan nilai yang sama dengan bidang Anda.
Pastikan validitas input selalu sesuai dengan validitas kolom Anda. Anda dapat melakukan ini melalui metode setCustomValidity yang ada pada HTMLInputElement .
Lihat metode setValidationTarget dalam kode sumber elemen khusus <file-input> sebagai contoh.
npm install npm install -g grunt-cli grunt
Menjalankan grunt tanpa parameter apa pun akan diuji pada beberapa browser yang diinstal secara lokal (lihat basis kode untuk detailnya).
Menjalankan grunt shell:wctSauce akan menjalankan pengujian terhadap sejumlah browser di SauceLabs. Pastikan Anda memiliki nama pengguna dan kunci SauceLabs yang dilampirkan ke variabel lingkungan yang sesuai terlebih dahulu.
