تحسين تجربة المستخدم في تحقق صناديق الاختيار باستخدام جافا سكريبت

10/02/2024

5 2 دقائق

عند التعامل مع صفحات الويب وتطوير الواجهات الرسومية، يصبح التحقق من صحة الإدخالات وضمان تعامل سلس وصحيح أمرًا حاسمًا. في هذا السياق، تقدم لنا الشيفرة التي قدمتها مجالًا يتطلب فيه التحقق من اختيار المستخدم للخيارات المختلفة باستخدام صناديق الاختيار (الـcheckboxes). سنقوم هنا بتحسين هذا الجانب من الكود باستخدام الجافا سكريبت لضمان أنه في حالة عدم تحديد أي خيار، سيتم عرض رسالة خطأ للمستخدم.

للقيام بذلك، يمكن استخدام الجافا سكريبت للوصول إلى الصناديق (الـcheckboxes) وفحص ما إذا كانت أي منها قد تم تحديدها. إليك كيف يمكن تحقيق ذلك:

html
html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تحقق من تحديد صناديق الاختيارtitle>
    <script>
        function validateCheckboxes() {
            // الحصول على جميع عناصر الصناديق بناءً على اسم الـcheckbox
            var checkboxes = document.getElementsByName("chk_stat[]");
            var isChecked = false;

            // فحص ما إذا كان أي من صناديق الاختيار قد تم تحديده
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    isChecked = true;
                    break;
                }
            }

            // إذا لم يتم تحديد أي صندوق، عرض رسالة خطأ
            if (!isChecked) {
                alert("يرجى اختيار خيار واحد على الأقل في قسم الحالة (Status).");
                return false; // يمنع إرسال الاستمارة إذا لم يتم تحديد أي صندوق
            }

            return true; // يسمح بإرسال الاستمارة إذا تم تحديد صندوق واحد على الأقل
        }
    script>
head>
<body>
    <form onsubmit="return validateCheckboxes();">
        <table>
            <tr>
                <td>الحالةtd>
                <td colspan="3">
                    <input type="checkbox" name="chk_stat[]" value="single" id="chk_stat"> أعزب
                    <input type="checkbox" name="chk_stat[]" value="married" id="chk_stat"> متزوج
                    <input type="checkbox" name="chk_stat[]" value="divorcee" id="chk_stat"> مطلق
                    <input type="checkbox" name="chk_stat[]" value="student" id="chk_stat"> طالب
                td>
            tr>
            <tr>
                <td colspan="4">
                    <input type="submit" value="إرسال">
                td>
            tr>
        table>
    form>
body>
html>

في هذا الكود، قمنا بإضافة دالة validateCheckboxes() التي تتحقق من تحديد أي صندوق. إذا لم يتم تحديد أي منها، سيتم عرض نافذة تنبيه (alert) تطلب من المستخدم تحديد خيار واحد على الأقل. يتم استدعاء هذه الدالة في حدث onsubmit للنموذج، مما يضمن تنفيذها قبل إرسال النموذج.

المزيد من المعلومات

مقالات ذات صلة

تحسين أداء الكود البرمجي باستخدام تقنيات تقليل الحجم

تحسين أمان تسجيل الدخول في نظام PHP

تحديد العناصر الأولى في CSS

طباعة الأرقام الرومانية في لغة C