كيف التحقق من حقل select في جافاسكربت؟

وعليكم السلام، 

يمكنك مباشرة جلب القيمة الخاصة بالحقل وفحصها والتحقق منها:

var select = document.getElementById('select'); // جلب عنصر القائمة المستهدف
var value = select.value;

if (value.length > 0) {
  // تم اختيار قيمة من القائمة المنسدلة
}

ايضا يمكنك استعمال الخاصية required في HTML5

<select id="select" required="required">
   <option value="">Choose an option</option>
   <option value="option1">Option1</option>
   <option value="option2">Option2</option>
   <option value="option3">Option3</option>
</select>

يتم اجبار المستخدم هنا على اختيار حقل قبل تقديم النموذج، يمكنك تخصيص التحقق بما يلائم حاجتك. وليكن مثلا التحقق من ما ان كان طرح تاريخ اليوم الى تاريخ ميلاد المستخدم يساوي او اكبر من 18 سنة.

بتاريخ 2 ساعات قال Adnane Kadri:

وعليكم السلام، 

يمكنك مباشرة جلب القيمة الخاصة بالحقل وفحصها والتحقق منها:

var select = document.getElementById('select'); // جلب عنصر القائمة المستهدف
var value = select.value;

if (value.length > 0) {
  // تم اختيار قيمة من القائمة المنسدلة
}

ايضا يمكنك استعمال الخاصية required في HTML5

<select id="select" required="required">
   <option value="">Choose an option</option>
   <option value="option1">Option1</option>
   <option value="option2">Option2</option>
   <option value="option3">Option3</option>
</select>

يتم اجبار المستخدم هنا على اختيار حقل قبل تقديم النموذج، يمكنك تخصيص التحقق بما يلائم حاجتك. وليكن مثلا التحقق من ما ان كان طرح تاريخ اليوم الى تاريخ ميلاد المستخدم يساوي او اكبر من 18 سنة.

دي ال form كاملة

<form class="sign-up-form row needs-validation mx-auto p-4" novalidate>

            <div class="form-text text-center mx-auto">

                <h3>إنشاء حساب جديد</h3>

            </div>

            <div class="col-12 mb-3">

                <input type="text" class="form-control" placeholder="الإسم" required>

                <div class="invalid-feedback">

                    يرجي إدخال الإسم

                </div>

            </div>

            <div class="col-12 mb-3">

                <div class="form-inline">

                        <label>تاريخ الميلاد</label>

                        <select class="form-control" name="year-dropdown" id="year-dropdown" requrired>

                        </select>

                        <select class="form-control" name="month">

                            <option value="01">January</option>

                            <option value="02">February</option>

                            <option value="03">March</option>

                            <option value="04">April</option>

                            <option value="05">May</option>

                            <option value="06">June</option>

                            <option value="07">July</option>

                            <option value="08">August</option>

                            <option value="09">September</option>

                            <option value="10">October</option>

                            <option value="11">November</option>

                            <option value="12">December</option>

                        </select>

                        <select class="form-control" name="day">

                            <option value="01">1</option>

                            <option value="02">2</option>

                            <option value="03">3</option>

                            <option value="04">4</option>

                            <option value="05">5</option>

                            <option value="06">6</option>

                            <option value="07">7</option>

                            <option value="08">8</option>

                            <option value="09">9</option>

                            <option value="10">10</option>

                            <option value="11">11</option>

                            <option value="12">12</option>

                            <option value="13">13</option>

                            <option value="14">14</option>

                            <option value="15">15</option>

                            <option value="16">16</option>

                            <option value="17">17</option>

                            <option value="18">18</option>

                            <option value="19">19</option>

                            <option value="20">20</option>

                            <option value="21">21</option>

                            <option value="22">22</option>

                            <option value="23">23</option>

                            <option value="24">24</option>

                            <option value="25">25</option>

                            <option value="26">26</option>

                            <option value="27">27</option>

                            <option value="28">28</option>

                            <option value="29">29</option>

                            <option value="30">30</option>

                            <option value="31">31</option>

                        </select>

                        <div class="invalid-feedback">

لا يسمح لمن هم أقل من 10 سنوات

                        </div>

                    </div>

                </div>

            </div>

            <div class="col-12 mb-2">

                <input type="email" class="form-control" placeholder="البريد الإلكتروني" required>

                <div class="invalid-feedback">

                    يرجي إدخال البريد الإلكتروني

                </div>

            </div>

            <div class="col-12 mb-3">

                <input type="password" class="form-control" placeholder="كلمة المرور" required>

                <div class="invalid-feedback">

                    يرجي إدخال كلمة المرور

                </div>

            </div>

            <div class="col-12 mb-3">

                <input type="password" class="form-control" placeholder="تأكيد كلمة المرور" required>

                <div class="invalid-feedback">

                    يرجي تأكيد كلمة المرور

                </div>

            </div>

            <div class="col-12">

                <div class="row">

                    <div class="col-12 col-md-6 d-flex justify-content-center">

                        <button class="py-2" type="submit">إنشاء حساب</button>

                    </div>

                    <div class="col-12 col-md-6 d-flex justify-content-center">

                        <a href="#" class="account" id="account">هل لديك حساب؟</a>

                    </div>

                </div>

            </div>

        </form>

ال select الخاص بالسنين فاضي وله كود جافا سكريبت الآتي

let currentYear = new Date().getFullYear();    

let earliestYear = 1970;    

while (currentYear >= earliestYear) {      

    let dateOption = document.createElement('option');          

    dateOption.text = currentYear;      

    dateOption.value = currentYear;        

    dateDropdown.add(dateOption);      

    currentYear -= 1;    

عاوز احقق شرط ان المستخدم يكون اكبر من 10سنين فعملت كود ال js الآتي

let myForm = document.querySelector("form.sign-up-form");

let formInline = myForm.querySelector(".form-inline");

let feedBack = formInline.querySelector(".invalid-feedback");

let myButton = myForm.querySelector("button[type=submit]");

let yearSelect = document.getElementById("year-dropdown");

myButton.addEventListener("click", function(){

    let year = yearSelect.value;

    if(year >= 2012){

        feedBack.style.display = "block";

    }

});

لكن لسه بيظهر علامة الصح مع الأقل من عشر سنين

ازاي اقدر اشيل علامات الصح دي لو السنة أكبر من او تساوي 2012 ؟

شكرا واسف علي الإطالة

بتاريخ 2 ساعات قال Ahmed Soliman12:

دي ال form كاملة

لكن لسه بيظهر علامة الصح مع الأقل من عشر سنين

ازاي اقدر اشيل علامات الصح دي لو السنة أكبر من او تساوي 2012 ؟

شكرا واسف علي الإطالة

هلا قمت بتحديد عنصر القائمة بعد حدث الضغط وليس قبله؟

myButton.addEventListener("click", function(){

    let yearSelect = document.getElementById("year-dropdown");

    let year = yearSelect.value;

بتاريخ 14 ساعات قال Adnane Kadri:

هلا قمت بتحديد عنصر القائمة بعد حدث الضغط وليس قبله؟

myButton.addEventListener("click", function(){

    let yearSelect = document.getElementById("year-dropdown");

    let year = yearSelect.value;

 

لم تحل المشكلة

كيف أعمل إستثناء لعناصر ال select من ال validation بواسطة javascript ؟

شكرا

بتاريخ 2 دقائق مضت قال Ahmed Soliman12:

لم تحل المشكلة

كيف أعمل إستثناء لعناصر ال select من ال validation بواسطة javascript ؟

شكرا

من اجل استثناءها من التحقق لا تحددها ببساطة واحذف الأسطر الخاصة بها.

ما تحاول القيام به غير واضح جيدا. هل تبحث عن كيفية التحقق من حقل select في جافاسكربت أم عن كيفية استثناءه من التحقق؟

هذا هو المشروع كامل اريد ان يتحقق من ان المستخدم اكبر من 10 سنوات

School_project.zip

السلام عليكم .

الخطا هنا اخى 

 if(year >= 2012){

        feedBack.style.display = "block";

    }

انت تقوم فقط بتغير ال style لل feedback انت لا تريد تغير ال style ولكن تريد انت تجعل هذا العنصر يحمل invalid state ولعمل ذالك نستخدم

yearSelect.setCustomValidity('any error!!')

وهذه الدالة تقوم بجعل العنصر يحمل الخطا وبذالك لا نستطيع ان نقوم بعمل submit لل form وال errors تظهر تلقائيا بواسطة ال bootstrap.

ولجعل العنصر صحيح مره اخرى تضع رساله الخطا فارغة.

ولمزيد من التفاصيل يمكنك قرائة هذا المقال

https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity