Bagaimana untuk Menyesuaikan Popup Pengesahan Borang HTML5 dengan jQuery dan 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">

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");

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);

.webshims-validity-tooltip {
    /* Style the popup here */
}

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!