ناساندنی ڕووداوەکانی Form

لە جیهانی وێبدا، فۆرمەکان گرنگترین ئامرازن بۆ وەرگرتنی زانیاری لە بەکارهێنەرەوە. کاتێک بەکارهێنەر دوگمەی 'Submit' دادەگرێت، بە شێوەیەکی بنەڕەتی بڕاوەزەر (Browser) هەوڵ دەدات داتاکان بنێرێت بۆ سێرڤەر و لاپەڕەکە ڕیفرێش دەکاتەوە. ئەمە لە زۆربەی حاڵەتەکانی بەرنامەسازی مۆدێرندا نەخوازراوە.

ڕاگرتنی کردارە بنەڕەتییەکە (preventDefault)

گرنگترین ڕووداو لە فۆرمدا ڕووداوی submit-ە. کاتێک ئەم ڕووداوە ڕوودەدات، ئێمە دەتوانین بە بەکارهێنانی فەنکشنی event.preventDefault() ڕێگری لە ڕیفرێشبوونی لاپەڕەکە بکەین.

const myForm = document.querySelector('#myForm');

myForm.addEventListener('submit', function(event) {
  // ڕاگرتنی کردارە بنەڕەتییەکەی فۆرم
  event.preventDefault();
  
  console.log('فۆرمەکە نەنێردرا و لاپەڕەکە ڕیفرێش نەبوو!');
});

لێرەدا، کاتێک بەکارهێنەر فۆرمەکە دەنێرێت، لاپەڕەکە وەک خۆی دەمێنێتەوە و ئێمە دەتوانین بە ئارەزووی خۆمان داتاکان بەکاربهێنین.

خوێندنەوەی داتاکانی ناو فۆرم

دوای ئەوەی ڕێگریمان لە ناردنی فۆرمەکە کرد، ئێستا کاتی ئەوەیە داتاکانی ناو خانەکان (Inputs) بخوێنینەوە. دەتوانین بە بەکارهێنانی FormData یان بە ناوی ID-ی هەر خانەیەک دەستیان پێ بگەیەنین.

const form = document.querySelector('#myForm');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  const username = document.querySelector('#username').value;
  console.log('ناوی بەکارهێنەر بریتییە لە: ' + username);
});

هەڵەی باو: زۆرێک لە فێرخوازان بیردەچێت .value بەکاربهێنن و تەنها ئاماژە بە ئەنسیری HTML-ەکە دەکەن، کە ئەمەش تەنها ئۆبژێکتەکە دەگەڕێنێتەوە نەک دەقەکەی ناو فۆرمەکە.

پشکنینی داتا (Validation)

پێش ئەوەی داتاکان بنێرین بۆ سێرڤەر، پێویستە دڵنیابین کە داتاکان بە دروستی پڕکراونەتەوە. بۆ نموونە، ئایا خانەی 'ئیمەیڵ' بەتاڵە؟

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.querySelector('#email').value;

  if (email === '') {
    alert('تکایە ئیمەیڵەکەت بنووسە!');
  } else {
    console.log('سەرکەوتوو بوو!');
  }
});

ڕووداوەکانی تری فۆرم

جگە لە submit، چەند ڕووداوێکی تری گرنگ هەن کە دەتوانیت بەکاریان بهێنیت:

• input: کاتێک بەکارهێنەر دەست دەکات بە نووسین لە ناو خانەکەدا.
• change: کاتێک دەستکاری خانەکە تەواو دەبێت و بەکارهێنەر دەچێتە خانەیەکی تر.
• focus: کاتێک بەکارهێنەر کلیک لەسەر خانەکە دەکات.

ئەنجامدانی ڕاهێنان

بۆ ئەوەی زیاتر فێر ببیت، ئەم ڕاهێنانە ئەنجام بدە:

ئەرک: فۆرمێکی سادە دروست بکە کە دوو خانەی تێدایە (ناوی بەکارهێنەر و تەمەن). کاتێک بەکارهێنەر دەیاننێرێت، پشکنینێک ئەنجام بدە: ئەگەر تەمەنەکە لە 18 کەمتر بوو، پەیامێکی هۆشداری لە ناو لاپەڕەکەدا پیشان بدە و ڕێگری لە ناردنی فۆرمەکە بکە.