Data format validation (email, number, string, mobile number, name)

📖 Theory

ભરાયેલું, પણ બકવાસ

FestConnect હવે ખાલી ખાનાં નકારે છે. પણ પત્રક હજી કચરાથી ભરાય છે: email hello, mobile 12, નામ asdf123. દરેક ખાનું ભરાયેલું છે, એટલે પાયાનું validation પસાર થઈ ગયું, છતાં એકેય વાપરવા લાયક નથી.

પછીનું સ્તર છે સ્વરૂપ નું validation: ફક્ત 'કંઈક છે?' નહીં પણ 'એ સાચા આકાર નું છે?'. Email એ email જેવું લાગવું જોઈએ; mobile દસ આંકડાનો હોવો જોઈએ; નામ અક્ષરોનું હોવું જોઈએ. આકાર તપાસવાનું સૌથી ધારદાર ઓજાર છે regular expression.

📖 Theory

એવો બીબાનો કાપ જેમાં જવાબ બેસવો જોઈએ

Regular expression એ માન્ય input ના આકારમાં કપાયેલું બીબું છે. તમે વાપરનારનું લખાણ એના પર મૂકો છો: જો એ કાપમાં બરાબર બેસે, તો પસાર; જો કોઈ ભાગ બહાર નીકળીને મળતો ન આવે, તો નાપાસ. \d{9} એ બરાબર નવ આંકડા માટેનું બીબાનું ખાનું છે; ^ અને $ એ બીબાની કિનારીઓ છે, જે આખા જવાબને બેસવા ફરજ પાડે છે, ફક્ત એના ખૂણાને નહીં.

📊 At a glance

Validation ની સામાન્ય ભાતો

⌨️ Practical

FestConnect ની સ્વરૂપની ચકાસણીઓ

// pattern.test(value) returns true/false
function checkFormats(name, email, mobile) {
  let namePat   = /^[A-Za-z ]+$/;       // letters + spaces
  let emailPat  = /^\S+@\S+\.\S+$/;     // x@y.z
  let mobilePat = /^[6-9]\d{9}$/;        // 10 digits, 6-9 first

  if (!namePat.test(name))   { alert("Name: letters only"); return false; }
  if (!emailPat.test(email)) { alert("Email looks invalid"); return false; }
  if (!mobilePat.test(mobile)){ alert("Mobile: 10 digits");  return false; }
  return true;
}

console.log(checkFormats("Aditi Shah", "aditi@x.com", "9876543210")); // true
console.log(checkFormats("asdf123",    "hello",       "12"));         // false

// a number field: reject non-numeric
let age = "20";
console.log(!isNaN(Number(age)));   // true

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

^ અને $ કેમ?

Mobile ની ભાત છે /^[6-9]\d{9}$/. જો તમે ^ અને $ કાઢી નાખો અને call me 9876543210 today ના input પર ફક્ત /[6-9]\d{9}/ વાપરો, તો શું ખોટું થાય?

🧩 Quiz

કયું input ભારતીય mobile ની ભાત /^[6-9]\d{9}$/ બરાબર પસાર કરે છે?

1. 9876543210
2. 1234567890 (1 થી શરૂ થાય છે)
3. 98765 43210 (એમાં જગ્યા છે)
4. 98765432 (ફક્ત 8 આંકડા)

⚠️ Watch out

સ્વરૂપના validation ના ફાંદા

1. ખૂટતી કિનારીઓ: ^ અને $ વગર ભાત અંદરના ટુકડા સાથે મળે છે, એટલે માન્ય ટુકડાની આસપાસનો કચરો સરકી જાય છે.

2. નામ પર બહુ બંધન: ખરેખરાં નામમાં જગ્યાઓ હોય છે (અને ક્યારેક ટપકાં કે ડૅશ). ફક્ત અક્ષરોવાળી ભાત જે જગ્યાની મનાઈ કરે એ 'Aditi Shah' ને નકારે છે.

3. ફરી એક વાર client પર ભરોસો: સ્વરૂપની ચકાસણીઓ UX સુધારે છે પણ મક્કમ વાપરનાર એમને બાજુ પર મૂકી શકે છે, એટલે server એ ફરી validate કરવું જ પડે. આખા એકમમાં ચાલી આવેલો એ જ નિયમ છે.

✏️ Formula

FestConnect પૂરું થયું

પ્રવાસ પર નજર નાખો: Unit 1 એ HTML વત્તા CSS માં form અને પાનું બાંધ્યું, Unit 2 એ Bootstrap થી એને responsive બનાવ્યું, Unit 3 એ JavaScript નો તર્ક અને events ઉમેર્યાં, Unit 4 એ objects અને DOM દ્વારા પાનું વાંચ્યું અને બદલ્યું, અને Unit 5 એ register() ને દરેક ખાનું validate કરવા જોડ્યું, પહેલાં પાયાનું પછી સ્વરૂપનું, અને સફળ થાય તો બીજા પાના પર મોકલવા. એ આખો ફેરો, રચનાથી શૈલી, શૈલીથી વર્તન, અને વર્તનથી validation, એ જ web designing છે. પરીક્ષામાં, એને છેડેથી છેડા સુધી કહી શકવું એ કોઈ પણ એક class ના નામ કરતાં વધુ કિંમતી છે.

✅ Summary

Key takeaways

• સ્વરૂપનું validation ભરાયેલા data ના આકાર ને તપાસે છે, ફક્ત એની હાજરીને નહીં.
• pattern.test(value) વાપરો: email /^\S+@\S+\.\S+$/, નામ /^[A-Za-z ]+$/, mobile /^[6-9]\d{9}$/, આંકડા /^\d+$/.
• ^ અને $ ભાતને આખી string સાથે બાંધે છે, અને 'એમાં છે' ને 'એ બરાબર આ જ છે' માં ફેરવે છે.
• ભારતીય mobile = 6-9 થી શરૂ થતા 10 આંકડા; નામ પર બહુ બંધન ન મૂકો (જગ્યાઓ ચાલવા દો).
• આંકડા: !isNaN(Number(value)) કસો. Client ની ચકાસણીઓ UX માટે છે; server એ ફરી validate કરવું જ પડે.
• Memory hook: regex એ બીબું છે જેમાં આખો જવાબ બેસવો જોઈએ.