Bagaimana untuk Menyesuaikan Popup Pengesahan Borang HTML5 dengan jQuery dan Webshims?

Barbara Streisand
Lepaskan: 2024-11-07 22:03:02
asal
511 orang telah melayarinya

How to Customize HTML5 Form Validation Popups with jQuery and Webshims?

Cara Menyesuaikan Pop Timbul Pengesahan Borang HTML5

Dalam HTML5, borang menyediakan keupayaan pengesahan terbina dalam untuk medan yang diperlukan. Walau bagaimanapun, pop timbul lalai yang muncul apabila medan yang diperlukan dibiarkan kosong selalunya tidak boleh disesuaikan dengan CSS.

Timbul Pengesahan Borang HTML5 Lalai

Pertimbangkan borang HTML5 berikut:

<form>
    <input type="text" name="name">
Salin selepas log masuk

Jika pengguna menyerahkan borang tanpa memasukkan nilai untuk medan nama, HTML5 akan memaparkan pop timbul yang menyatakan "Medan ini diperlukan." Pop timbul ini adalah sebahagian daripada fungsi penyemak imbas dan tidak boleh diubah terus menggunakan CSS.

Menukar Mesej Ralat

Satu pilihan ialah menukar mesej ralat menggunakan setCustomValidity( ) kaedah:

document.getElementById("name").setCustomValidity("Your custom error message");
Salin selepas log masuk

Ini membolehkan anda memberikan mesej yang lebih khusus, tetapi gaya pop timbul lalai kekal.

Mengatasi dengan jQuery

Untuk mengatasi sepenuhnya gaya pop timbul, anda boleh menggunakan jQuery bersama-sama dengan perpustakaan Webshims, seperti yang ditunjukkan dalam contoh berikut:

;(function ($) {
    webshims.setOptions('forms-ext', {
        validityMessages: {
            valueMissing: 'Your custom error message'
        },
        customMessages: true,
        replaceValidationUI: true
    });
})(jQuery);
Salin selepas log masuk
.webshims-validity-tooltip {
    /* Style the popup here */
}
Salin selepas log masuk

Penyelesaian ini membolehkan anda menggayakan pop timbul dengan CSS, memberikan lebih banyak fleksibiliti ke atas UI pengesahan.

Kesimpulan

Walaupun tidak mungkin untuk mengatasi gaya pop timbul pengesahan borang HTML5 semata-mata dengan CSS, menggunakan jQuery dan Webshims menyediakan pendekatan yang komprehensif untuk menyesuaikan penampilan mesej ralat dan panel. Ini membolehkan pembangun mencipta pengalaman pengesahan yang lebih mesra pengguna dan disesuaikan secara estetik.

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Popup Pengesahan Borang HTML5 dengan jQuery dan Webshims?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan