عندي form فيها input مختلفة radio , password ,email,text ,file and select و عايز
Disabling submit button until all fields have values using javascript
دماغي وقفت 
لو حد عنده موضوع افهم منه الطريقة يا ريت
1 Like
مرحبا @mohamedkhalil
لم تعطيني الأكواد التي حاولت كتابتها او كود الـ Form الخاص بك لكن لا مشكلة سنقوم بحل المشكلة بشكل عام ونحاول نغطي جميع الإحتمالات بإستخدام Javascript بدون أي مكاتب.
عشان نحل أي مشكلة لازم نقوم بتبسيطها وتقسيمها إلى خطوات.
في البدأية سأقوم بإنشاء Form بسيط يحتوي على حقول إدخال ونحاول نحقق المطلوب ومن ثم بإمكاننا أن ننتقل للخطوة التالية.
لنقم بإنشاء الـ Form التالي:
<form>
<div>
<labal>Name:</labal>
<input type="text" required>
</div>
<div>
<labal>Email:</labal>
<input type="email">
</div>
<div>
<button id="submit" type="submit" disabled>submit</button>
</div>
</form>
الـ Form
1- قمت بإضافة حقلين الأول من النوع text و الثاني من النوع email
2- أعطيت الحقل الأول required
3- أعطيت الزر disabled كحالة إبتدأية لحين ما يتم تعبئة الحقل المطلوب
النتيجة:
الهدف:
أن يتم تفعيل الـ button عند تعبئة حقل الـ Name والذي هي required.
الخطة:
1- سأقوم بتحديد الـ Form بإستخدام لغة الجافاسكربت
2- سأقوم بتحديد جميع الحقول التي هي required
3- سأقوم بتحديد الـ button
ومن ثم سأقوم بعمل Event Listener للـ Form بمجرد ما إن يقوم المستخدم بكتابة شئ فية سأفترض في البدأية بأنه قام بكل شئ بشكل صحيح وبمجرد ما إن أجد بأن أحد الحقول المطلوبة فارغ أو يحتوي مسافات فسأقوم بإلغاء إفتراضي الأول واخلي الزر غير فعال. اما اذا ما كان إفتراضي الأول سليم ولم ينتهك المستخدم شروطي فسيظل الإفتراض كما هو ويتم تفعيل الزر.
الأكواد:
1- تحديد الـ Form:
let form = document.querySelector("form");
2- تحديد الحقول المطلوبة بدأخل الـ Form:
let inputs = form.querySelectorAll("[required]");
3- تحديد الزر
let submitButton= document.getElementById("submit");
4- عمل Event Listener للـ Form عندما يقوم المستخدم بالإدخال للـ inputs من خلال الـ keyup
form.addEventListener("keyup", checkFormInputs);
5- عند قيام المستخدم بذلك سيتم عمل Invoke للدالة checkFormInputs.
في هذه الدالة سنقوم بكتابة الـ logic التالي:
1- سنفترض أن جميع الحقول تم تعبئتها وبأنه لا يوجد أي حقل فارغ بإنشاء متغير بإسم isEmpty وأسند له القيمة false.
let isEmpty = false;
2- سأقوم بالمرور على الـ node list التي تحتوي جميع العناصر الـ required والتي قمنا بتحديدها في الخطوة 2 بإستخدام forEach على سبيل المثال بالشكل التالي:
inputs.forEach( input =>{
});
3- الأن سنقوم بالتحقق من ما إن كان كل حقل غير فارغ !input.value أو من انه لا يحتوي على مسافات من خلال مسح كل المسافات الموجود في الحقل !input.value.replace(/\s/g, ""). لنقم بكتابة الشرط:
if(!input.value || !input.value.replace(/\s/g, "")){
}
4- الأن في حال ما إن تحقق هذا الشرط فذلك يدل على أن المستخدم قد ترك هذا الحقل فارغ بينما هو required، أي انه سأقوم بكسر إفتراضي الاول وأقول بأن هناك حقل فارغ بتغيير قيمة المتغير isEmpty إلى true بالشكل التالي:
if(!input.value || !input.value.replace(/\s/g, "").length){
isEmpty = true;
}
بعد أن تنتهي الحلقة forEach سيكون لدينا المتغير isEmpty والذي سيخبرنا في ما إن كان المستخدم قد ترك أحد الحقول المطلوبة فارغ.
بحيث إما ستكون قيمته true والتي تعني بان هناك حقل فارغ
او ستكون false والتي تعني بأنه لم يترك حقل مطلوب فارغ
5- سنقوم بإسناد قيمة هذا المتغير للزر ليتم من خلالها تحديد في ما إن كان سيتم تفعيل الزر او الإبقاء عليه غير مفعل بالشكل التالي:
submitButton.disabled = isEmpty;
الكود النهائي:
let form = document.querySelector("form");
let inputs = form.querySelectorAll("[required]");
let submitButton= document.getElementById("submit");
form.addEventListener("keyup", checkFormInputs);
function checkFormInputs(){
let isEmpty = false;
inputs.forEach( input =>{
if(!input.value || !input.value.replace(/\s/g, "")){
isEmpty = true;
}
})
submitButton.disabled = isEmpty;
}
النتيجة:
ستلاحظ بأنه لا يتم تفعيل الزر الا بعد تعبئة الحقل Name.
قم بتجربة إضافة الـ required attribute للحقل الأخر الـ Email وجرب ذلك كالتالي:
<form>
<div>
<labal>Name:</labal>
<input type="text" required>
</div>
<div>
<labal>Email:</labal>
<input type="email" required>
</div>
<div>
<button id="submit" type="submit" disabled>submit</button>
</div>
</form>
ستجد الأن بأنه لا يتم تفعيل الزر الا بعد ملئ العنصرين.
ما التالي:
إنتهينا من التعامل مع الحقول العادية، تبقى ان نتعامل مع select و الـ files سنقوم بذلك بتغيير شئ بسيط. وأيضاً سنقوم بإضافة logic محدد للتعامل مع كلاً من الـ radio و الـ checkbox
أريد منك أن تتطلع على هذا الجزء وتقول لي إذا كان واضح قبل أن ننتقل للجزء الثاني
1 Like
اهلا بيك يا استاذي شكرا ليك طبعا لردك و اهتمامك ده الكود ال استخدمته و لكن select , file and radio معرفتش اطبق عليهم
var btn = document.querySelector(".submit")
function success() {
if(document.getElementById("Create-Name").value==="" || document.getElementById("Create-email").value==="" || document.getElementById("Create-telephone").value==="" ) {
btn.disabled = true;
} else {
btn.disabled = false;
btn.setAttribute("id","submit-enabled");
}
}
1 Like
الكود مفهوم الحمد لله
1 Like
اهلا بيك يا استاذي شكرا ليك طبعا لردك و اهتمامك ده الكود ال استخدمته و لكن select , file and radio معرفتش اطبق عليهم
اهلا محمد، لا شكر على واجب 
وافيني بالكود كاملاً مع الـ HTML.
الكود مفهوم الحمد لله
ممتاز، و في حال هناك نقطة حتى ولو كانت صغيرة غير واضحة قول لي .
عموماً أنا حالياً لم أعد على جهاز الكمبيوتر، قم بموافاتي بما طلبته منك وغداً في وقت مبكر إن شاء الله سنكمل أنا وأنت 
1 Like
ده لينك الموقع ال شغال عليه هو حاجه بسيطة جدا عشان كده قررت اعملها و ده لنصيحه حضرتك قولتها اتمرنوا ف مواقع خيرية و مجانية عشان تقوي cv احسن من مواقع يتم تقليدها و مش هتفيد حد
https://condescending-hypatia-8c5314.netlify.com/
1 Like
برافو 
عمل جميل و خطوة رائعة، إستمر وراح تلاحظ مدى التطور في مهاراتك من خلال التحديات الي تواجهها.
1 Like
ان شاء الله شكرا ليك يا أ محمد
1 Like
عفواً، أشوفك بكرة عشان الموضوع الي طرحته.
تصبح على خير
1 Like
و انت من اهل الخير شكرا ليك 
1 Like
بس في حاجتين
الاولة انه صار صباح اصلاً
الثانية اني بشوفك اليوم بالاصح مش بكرة
يلا معليش
1 Like
هههههههههههههههههههههههه
ولا يهمك كده كده هفضل صاحي لحد متيجي
1 Like
متنساش باقي الشرح ا محمد مستني حضرتك
1 Like
ما نسيتك ومعذرة عن التأخير، راح نكمل خلال الساعات القادمة
1 Like
سلام @mohamedkhalil
راح أكمل لك الشرح الذي بدأته حتى تأخذ الفكرة العامة وسيكون بإمكانك إستخدامها مع الـ Form الخاص بك أو أي Form أخر مهما كانت محتوياته.
في المرة السابقة قمنا بالتأكد من حقول الإدخال نوع text, password واي نوع أخر من الحقول كـ textarea وما خلافة طالما وقد تم إعطاء الحقل required.
كذلك هذا الكود سيعمل مع القوائم التي هي select و file ولكن يجب أن نقوم بتجعل الـ event listener يستمع للـ event الي هو change كذلك وليس فقط keyup
form.addEventListener("change", checkFormInputs);
حيث راح يصبح كود الـ Javascript بالشكل التالي:
let form = document.querySelector("form");
let inputs = form.querySelectorAll("[required]");
let submitButton= document.getElementById("submit");
form.addEventListener("keyup", checkFormInputs);
form.addEventListener("change", checkFormInputs);
function checkFormInputs(){
let isEmpty = false;
inputs.forEach( input =>{
if(!input.value || !input.value.replace(/\s/g, "")){
isEmpty = true;
}
})
submitButton.disabled = isEmpty;
}
وكود الـ HTML:
<form>
<div>
<labal>Name:</labal>
<input type="text" required>
</div>
<div>
<labal>Email:</labal>
<input type="email" required>
</div>
<div>
<labal>Select:</labal>
<select required>
<option></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div>
<labal>File:</labal>
<input type="file" name="myFile" required>
</div>
<div>
<button id="submit" type="submit" disabled>submit</button>
</div>
</form>
النتيجة:
الأن بإمكانك تجربة الحقول وستجد بأنه لا يتم تفعيل الزر إلا عندما يتم ملئ جميع الحقول المطلوبة الي عندها الـ Attribute required
بهذا نكون إنتهينا من تغطية جميع الإحتمالات وتبقى لنا أن نتعامل مع الـ checkbox و الـ radio لأنه سيكون نوعاً ما tricky.
على سبيل المثال لدينا هذه الـ radio:
<div>
<labal>Gender:</labal>
<input type="radio" name="gender" value="male" required> Male
<input type="radio" name="gender" value="femal"> Femail
</div>
الأن لا نستطيع التحقق من ما إن كان المستخدم قد قام بإختيار قيمة لهذه العناصر الي هي الـ radio و الـ checkbox من خلال النظر لقيمة الـ value، لأنه هذه العناصر لازم يكون عندها value وما بتكون فارغة في أي حال من الاحوال.
لهذا لازم نشوف طريقة ثانية نتأكد من خلالها والي راح تكون بالتأكد من أن هذا العنصر قد تم عمل check له من قبل المستخدم.
أيضاً كما تلاحظ كل خيار سوا كان radioأو الـcheckboxيكون جميع الحقول الخاصة به تحت إسمname` واحد.
مثلا في الكود أعلاة الخيارات الأثنين تحت الإسم gender وقمت بإعطاء الخيار الأول required فقط لأنه سيكون كافي.
ما يزال بإمكانك إعطاء كل الخيارات required لا يوجد مشكلة في ذلك.
لذا الأن سأعتمد على أنني أقوم بالتأكد في ما إن كان المستخدم قد قام بالضغط على حقل إدخال من النوع checkbox او radio
if(input.type == "checkbox" || input.type == "radio"){
}
ومن ثم سأقوم بجلب جميع الخيارات التي تندرج تحت الـ name الخاص بالحقل الذي قام بالضغط عليه وسأقوم بعَد عدد الخيارات التي إختارها للـ checkbox فإذا كان العدد = صفر، ذلك يعني بأنه لم يقم بإختيار أي خيار منها. حينها سأقوم بجعل المتغير isEmpty = true أي أنه هناك حقل فارغ.
نفس المنطق سيعمل مع الـ radio لانه في الأخير نريد التأكد من أنه عدد الخيارات التي أختارها لا تساوي صفر.
الكود سيكون بالشكل التالي:
if(input.type == "checkbox" || input.type == "radio"){
let checkCount = document.querySelectorAll(`[name=${input.name}]:checked`).length;
if(checkCount == 0) isEmpty = true;
}
الأن سأعود بداخل الحلقة foreach وأقوم بوضع هذا الكود فيها بالشكل التالي:
let form = document.querySelector("form");
let inputs = form.querySelectorAll("[required]");
let submitButton= document.getElementById("submit");
form.addEventListener("keyup", checkFormInputs);
form.addEventListener("change", checkFormInputs);
function checkFormInputs(){
let isEmpty = false;
inputs.forEach( input =>{
if(input.type == "checkbox" || input.type == "radio"){
let checkCount = document.querySelectorAll(`[name=${input.name}]:checked`).length;
if(checkCount == 0) isEmpty = true;
}
else if(!input.value || !input.value.replace(/\s/g, "")){
isEmpty = true;
}
})
submitButton.disabled = isEmpty;
}
لاحظ قمت بوضع الكود السابق الذي قوم بالتحقق من الحقول الأخرى بدأخل else if.
حيث أصبح الأن الكود في البدأية يتأكد في ما إن كان الحقل هو checkbox او radio فإذا كان كذلك فسيتم تطبيق المنطق الذي قمنا بعملة وإلا فذلك يعني بانه حقل من نوع اخر وسيتم تطبيق المنطق الأخر.
الأكواد النهائية
كود HTML :
<form>
<div>
<labal>Name:</labal>
<input type="text" required>
</div>
<div>
<labal>Email:</labal>
<input type="email" required>
</div>
<div>
<labal>Select:</labal>
<select required>
<option></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div>
<labal>Gender:</labal>
<input type="radio" name="gender" value="male" required> Male
<input type="radio" name="gender" value="femal" required> Femail
</div>
<div>
<labal>Checkbox:</labal>
<input type="checkbox" name="checkbox" value="Bike" required> check1
<input type="checkbox" name="checkbox" value="Car"> check2
<input type="checkbox" name="checkbox" value="Boat"> check3
</div>
<div>
<labal>File:</labal>
<input type="file" name="myFile" required>
</div>
<div>
<button id="submit" type="submit" disabled>submit</button>
</div>
</form>
كود الـ JS:
let form = document.querySelector("form");
let inputs = form.querySelectorAll("[required]");
let submitButton= document.getElementById("submit");
form.addEventListener("keyup", checkFormInputs);
form.addEventListener("change", checkFormInputs);
function checkFormInputs(){
let isEmpty = false;
inputs.forEach( input =>{
if(input.type == "checkbox" || input.type == "radio"){
let checkCount = document.querySelectorAll(`[name=${input.name}]:checked`).length;
if(checkCount == 0) isEmpty = true;
}
else if(!input.value || !input.value.replace(/\s/g, "")){
isEmpty = true;
}
})
submitButton.disabled = isEmpty;
}
النتيجة:
في حال هناك شئ غير واضح أو مفهوم قول لي
أريد فقط الأشارة بأن الكود أعلاة لن يعمل في متصفح IE، عشان يعمل في هذا المتصفح وبعض المتصفحات القديمة راح نغير طريقة كتابة أكواد الـ JS من الـ ECMAScript 6 إلى التالي:
var submitButton= document.getElementById("submit");
var form = document.querySelector("form");
var inputs = form.querySelectorAll("[required]");
form.addEventListener("change", checkFormInputs);
form.addEventListener("keyup", checkFormInputs);
function checkFormInputs(){
var isEmpty = false;
[].forEach.call(inputs, function(input) {
if(input.type == "checkbox" || input.type == "radio"){
var checkCount = document.querySelectorAll("[name="+input.name+"]:checked").length;
if(checkCount == 0) isEmpty = true;
}
else if(!input.value || !input.value.replace(/\s/g, "").length){
isEmpty = true;
}
});
submitButton.disabled = isEmpty;
}
1 Like
شرح جميل جدا من حضرتك انا بقالي 11 شهر بعيد عن js و قدرت افهم الحمد لله شكرا جدا جدا لحضرتك و تعبتك معايا والله 
1 Like
لو عايز اغير شغل submitButton بمجرد مبقي enabled
submitButton.setAttribute("id","submit-enabled");
كل معملها يغير شكل submit بمجرد الكتابه ف اول input بخلاف باقي العناصر
1 Like
لازم تغيرها عندما يكون isEmpty قيمتة false بمعنى انه مافيش أي حقل فارغ.
if(!isEmpty){
submitButton.setAttribute("id","submit-enabled");
}
1 Like
شكرا جدا جدا والله بقيت بحب شعب اليمن كله بسببك ربنا يوفقك يا رب و يزيدك علما
1 Like