أحداث النماذج

<form id="loginForm">
    <input type="text" id="username" placeholder="اسم المستخدم">
    <input type="password" id="password" placeholder="كلمة المرور">
    <button type="submit">تسجيل الدخول</button>
</form>

<script>
$("#loginForm").on("submit", function(event) {
    event.preventDefault(); // منع الإرسال الافتراضي للنموذج

    let username = $("#username").val();
    let password = $("#password").val();

    console.log("اسم المستخدم:", username);
    console.log("كلمة المرور:", password);

    // إجراء إرسال AJAX أو التحقق هنا
});
</script>

<input type="text" id="email" placeholder="أدخل البريد الإلكتروني">
<span id="emailHelp" style="display:none;">
    يرجى إدخال عنوان بريد إلكتروني صالح
</span>

<script>
$("#email").on("focus", function() {
    $(this).css("border-color", "var(--primary)");
    $("#emailHelp").fadeIn();
}).on("blur", function() {
    $(this).css("border-color", "#ddd");
    $("#emailHelp").fadeOut();
});
</script>

<select id="country">
    <option value="">اختر البلد</option>
    <option value="us">الولايات المتحدة</option>
    <option value="uk">المملكة المتحدة</option>
    <option value="ca">كندا</option>
</select>
<div id="selectedCountry"></div>

<script>
$("#country").on("change", function() {
    let selected = $(this).val();
    let text = $(this).find("option:selected").text();

    $("#selectedCountry").html("لقد اخترت: <strong>" + text + "</strong>");
});
</script>

<input type="checkbox" id="terms">
<label for="terms">أوافق على الشروط والأحكام</label>
<button id="submitBtn" disabled>إرسال</button>

<script>
$("#terms").on("change", function() {
    if ($(this).is(":checked")) {
        $("#submitBtn").prop("disabled", false);
    } else {
        $("#submitBtn").prop("disabled", true);
    }
});
</script>

<textarea id="message" maxlength="200"></textarea>
<div id="charCount">0/200 حرف</div>

<script>
$("#message").on("input", function() {
    let length = $(this).val().length;
    let maxLength = $(this).attr("maxlength");

    $("#charCount").text(length + "/" + maxLength + " حرف");

    // تغيير اللون عند الاقتراب من الحد
    if (length > maxLength * 0.9) {
        $("#charCount").css("color", "red");
    } else {
        $("#charCount").css("color", "var(--text-dark)");
    }
});
</script>

<form id="registrationForm">
    <div>
        <input type="text" id="regUsername" placeholder="اسم المستخدم" required>
        <span class="error" id="usernameError"></span>
    </div>
    <div>
        <input type="email" id="regEmail" placeholder="البريد الإلكتروني" required>
        <span class="error" id="emailError"></span>
    </div>
    <div>
        <input type="password" id="regPassword" placeholder="كلمة المرور" required>
        <span class="error" id="passwordError"></span>
    </div>
    <button type="submit">تسجيل</button>
</form>

<script>
$(document).ready(function() {
    // التحقق من اسم المستخدم في الوقت الفعلي
    $("#regUsername").on("input", function() {
        let username = $(this).val();

        if (username.length < 3) {
            $("#usernameError").text("اسم المستخدم يجب أن يكون 3 أحرف على الأقل");
        } else if (!/^[a-zA-Z0-9_]+$/.test(username)) {
            $("#usernameError").text("يُسمح فقط بالحروف والأرقام والشرطة السفلية");
        } else {
            $("#usernameError").text("").css("color", "green").text("✓");
        }
    });

    // التحقق من البريد الإلكتروني عند الضبابية
    $("#regEmail").on("blur", function() {
        let email = $(this).val();
        let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (!emailPattern.test(email)) {
            $("#emailError").text("يرجى إدخال عنوان بريد إلكتروني صالح");
        } else {
            $("#emailError").text("").css("color", "green").text("✓");
        }
    });

    // مؤشر قوة كلمة المرور
    $("#regPassword").on("input", function() {
        let password = $(this).val();
        let strength = 0;

        if (password.length >= 8) strength++;
        if (/[a-z]/.test(password)) strength++;
        if (/[A-Z]/.test(password)) strength++;
        if (/[0-9]/.test(password)) strength++;
        if (/[^a-zA-Z0-9]/.test(password)) strength++;

        let strengthText = ["ضعيفة جداً", "ضعيفة", "متوسطة", "جيدة", "قوية"];
        let colors = ["#ff0000", "#ff6600", "#ffcc00", "#99cc00", "#00cc00"];

        $("#passwordError")
            .text("القوة: " + strengthText[strength - 1])
            .css("color", colors[strength - 1]);
    });

    // إرسال النموذج
    $("#registrationForm").on("submit", function(event) {
        event.preventDefault();

        // التحقق من مرور جميع التحققات
        let isValid = true;

        $(".error").each(function() {
            if ($(this).text() !== "✓" && $(this).text() !== "") {
                isValid = false;
            }
        });

        if (isValid) {
            alert("تم إرسال النموذج بنجاح!");
            // إجراء إرسال AJAX هنا
        } else {
            alert("يرجى إصلاح جميع الأخطاء قبل الإرسال");
        }
    });
});
</script>

<input type="text" id="selectText" value="حدد بعض النص في هذا الحقل">
<div id="selectedText"></div>

<script>
$("#selectText").on("select", function() {
    let selected = $(this).val().substring(
        this.selectionStart,
        this.selectionEnd
    );
    $("#selectedText").text("المحدد: " + selected);
});
</script>

<form>
    <label>
        <input type="radio" name="payment" value="credit"> بطاقة ائتمان
    </label>
    <label>
        <input type="radio" name="payment" value="paypal"> PayPal
    </label>
    <label>
        <input type="radio" name="payment" value="bank"> تحويل بنكي
    </label>
</form>
<div id="paymentMethod"></div>

<script>
$('input[name="payment"]').on("change", function() {
    let method = $(this).val();
    $("#paymentMethod").text("طريقة الدفع: " + method);
});
</script>

<form id="contactForm" class="form-container">
    <h2>اتصل بنا</h2>

    <div class="form-group">
        <input type="text" id="name" placeholder="اسمك" required>
        <span class="validation-msg" id="nameMsg"></span>
    </div>

    <div class="form-group">
        <input type="email" id="contactEmail" placeholder="البريد الإلكتروني" required>
        <span class="validation-msg" id="emailMsg"></span>
    </div>

    <div class="form-group">
        <select id="subject" required>
            <option value="">اختر الموضوع</option>
            <option value="general">استفسار عام</option>
            <option value="support">دعم فني</option>
            <option value="feedback">ملاحظات</option>
        </select>
    </div>

    <div class="form-group">
        <textarea id="contactMessage" rows="5" placeholder="رسالتك" required></textarea>
        <span class="char-counter" id="charCounter">0/500</span>
    </div>

    <button type="submit" id="submitContact">إرسال الرسالة</button>
</form>

<script>
$(document).ready(function() {
    // التحقق من الاسم
    $("#name").on("blur", function() {
        let name = $(this).val().trim();
        if (name.length < 2) {
            $("#nameMsg").text("الاسم قصير جداً").css("color", "red");
            return false;
        } else {
            $("#nameMsg").text("✓").css("color", "green");
            return true;
        }
    });

    // التحقق من البريد الإلكتروني
    $("#contactEmail").on("blur", function() {
        let email = $(this).val();
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            $("#emailMsg").text("بريد إلكتروني غير صالح").css("color", "red");
            return false;
        } else {
            $("#emailMsg").text("✓").css("color", "green");
            return true;
        }
    });

    // عداد الأحرف
    $("#contactMessage").on("input", function() {
        let length = $(this).val().length;
        $("#charCounter").text(length + "/500");

        if (length > 500) {
            $(this).val($(this).val().substring(0, 500));
        }
    });

    // إرسال النموذج
    $("#contactForm").on("submit", function(event) {
        event.preventDefault();

        // التحقق من جميع الحقول
        let valid = true;

        if ($("#name").val().trim().length < 2) valid = false;
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($("#contactEmail").val())) valid = false;
        if ($("#subject").val() === "") valid = false;
        if ($("#contactMessage").val().trim().length < 10) valid = false;

        if (valid) {
            // تعطيل زر الإرسال
            $("#submitContact").prop("disabled", true).text("جاري الإرسال...");

            // محاكاة إرسال AJAX
            setTimeout(function() {
                alert("تم إرسال الرسالة بنجاح!");
                $("#contactForm")[0].reset();
                $("#submitContact").prop("disabled", false).text("إرسال الرسالة");
                $(".validation-msg").text("");
            }, 2000);
        } else {
            alert("يرجى ملء جميع الحقول بشكل صحيح");
        }
    });
});
</script>