تغيير الرسالة الإفتراضية التي يتم عرضها عند ظهور الأخطاء ضمن form في جافاسكربت الدرس |36| - Programmer Tech

Programmer Tech

برمجة - مقالات - علوم كمبيوتر - برامج

إعلان اعلى المقالة

الأربعاء، 29 يوليو 2020

تغيير الرسالة الإفتراضية التي يتم عرضها عند ظهور الأخطاء ضمن form في جافاسكربت الدرس |36|


oninvalid Event and onsubmit

سوف نشرح عنصرين مهمين يتم استخدامها في الـ form بملف html و الوسم form هو عنصر يتم استخدامه في الموقع من اجل تسجيل دخول او تسجيل خروج او ارسال رسالة, اي يستخدم للتعامل مع السيرفر....الخ.

غالباً ما يتم وضع ضمن الوسم form بيانات تسجيل دخول مثل تسجيل الأسم و الباسورد و زر من نوع submet لإرسال هذه البيانات للسيرفر.

invalid

في ملف html

<body>
    <form>
        name : <input type="text" oninvalid="invalid()" required/><br>
        password : <input type="password"/><br>
        <button type="submit">تسجيل دخول</button>
    </form>
</body>


لقد أنشأنا الوسم form و ضمنه الوسم input لأجل تسجيل اسم مستخدم و كلمة مرور و الزر نوعه submit للإرسال ووضعنا العنصر oninvalid و ربطناه عبر الـ function الذي تسمى invalid و خاصية اجبار التعبئة required.

في ملف جافاسكربت

function invalid(){
    alert("الرجاء ادخال البيانات");
}


تم انشاء هنا function بإسم invalid و طريقة عرض البيانات عبر alert.

عندما نفتحه في المتصفح سيعطينا كما في الصورة.


نلاحظ انه اعطيناه تسجيل دخول دون أن نملئ أي شيئ في حقول الـ input و اظهر لنا ديالوك ينبهنا بتعبئة البيانات.

onsubmit

في ملف html

<body>
    <form onsubmit="submit_button()">
        name : <input type="text" oninvalid="invalid()" required/><br>
        password : <input type="password"/><br>

        <button type="submit">تسجيل دخول</button>
    </form>
</body>


هنا وضعنا الخاصية onsubmit ضمن الوسم form كي يكون التنفيذ في كل شيئ ضمن هذا الوسم و ربطناه عبر الـ function الذي اسمها submit_button.

في ملف جافاسكربت

function submit_button(){
    location.assign("https://www.programmer-tech.com");
    alert("");
}


تم انشاء function بإسم submit_button ووضعنا location.assign من اجل عند الضغط على الدخول يؤدي إلى الموقع المحدد.

عند فتح المتصفح

نلاحظ من خلال هذه الصورة انه عندما ملئنا الحقول و ضغطنا على زر تسجيل الدخول اظهر لنا ديالوك و بعدها مباشرتاً سيأخذنا للموقع الذي حددناه في location.assign.

لتحميل اكواد هذا الدرس اضغط على زر التحميل

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام