HTML Form Validation

HTML படிவ சரிபார்ப்பைக் கற்றுக்கொள்ளுங்கள்

JavaScript படிவ சரிபார்ப்பு

HTML படிவ சரிபார்ப்பு JavaScript மூலம் செய்யப்படலாம்.

ஒரு படிவ புலம் (fname) காலியாக இருந்தால், இந்த செயல்பாடு ஒரு செய்தியை எச்சரிக்கிறது, மற்றும் false ஐத் திருப்பித் தருகிறது, படிவம் சமர்ப்பிக்கப்படுவதைத் தடுக்க:

JavaScript எடுத்துக்காட்டு

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

படிவம் சமர்ப்பிக்கப்படும் போது செயல்பாடு அழைக்கப்படலாம்:

HTML படிவ எடுத்துக்காட்டு

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

உண்மையான படிவ சரிபார்ப்பு ஆர்ப்பாட்டம்:

JavaScript எண் உள்ளீட்டை சரிபார்க்க முடியும்

JavaScript பெரும்பாலும் எண் உள்ளீட்டை சரிபார்க்க பயன்படுத்தப்படுகிறது:

எண் சரிபார்ப்பு ஆர்ப்பாட்டம்:

தயவுசெய்து 1 முதல் 10 வரையிலான எண்ணை உள்ளிடவும்

தானியங்கி HTML படிவ சரிபார்ப்பு

HTML படிவ சரிபார்ப்பு உலாவியால் தானாகவே செய்யப்படலாம்:

ஒரு படிவ புலம் (fname) காலியாக இருந்தால், required பண்புக்கூறு இந்த படிவத்தை சமர்ப்பிப்பதைத் தடுக்கிறது:

HTML படிவ எடுத்துக்காட்டு

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

⚠️ கவனிக்க:

தானியங்கி HTML படிவ சரிபார்ப்பு இன்டர்நெட் எக்ஸ்ப்ளோரர் 9 அல்லது அதற்கு முந்தைய பதிப்புகளில் வேலை செய்யாது.

தானியங்கி சரிபார்ப்பு ஆர்ப்பாட்டம்:

தரவு சரிபார்ப்பு

தரவு சரிபார்ப்பு என்பது பயனர் உள்ளீடு சுத்தமாக, சரியாக மற்றும் பயனுள்ளதாக இருக்கிறதா என்பதை உறுதிப்படுத்தும் செயல்முறையாகும்.

வழக்கமான சரிபார்ப்பு பணிகள்:

பெரும்பாலும், தரவு சரிபார்ப்பின் நோக்கம் சரியான பயனர் உள்ளீட்டை உறுதிப்படுத்துவதாகும்.

சரிபார்ப்பு பல வெவ்வேறு முறைகளால் வரையறுக்கப்படலாம், மற்றும் பல வெவ்வேறு வழிகளில் பயன்படுத்தப்படலாம்.

சேவையக பக்க சரிபார்ப்பு

ஒரு வலை சேவையகத்தால் செய்யப்படுகிறது, உள்ளீடு சேவையகத்திற்கு அனுப்பப்பட்ட பிறகு

கிளையன் பக்க சரிபார்ப்பு

ஒரு வலை உலாவியால் செய்யப்படுகிறது, உள்ளீடு வலை சேவையகத்திற்கு அனுப்பப்படுவதற்கு முன்பு

HTML கட்டுப்பாடு சரிபார்ப்பு

HTML5 ஒரு புதிய HTML சரிபார்ப்பு கருத்தை அறிமுகப்படுத்தியது, இது கட்டுப்பாடு சரிபார்ப்பு என்று அழைக்கப்படுகிறது.

HTML கட்டுப்பாடு சரிபார்ப்பு பின்வருவன அடிப்படையாகக் கொண்டது:

கட்டுப்பாடு சரிபார்ப்பு HTML உள்ளீட்டு பண்புக்கூறுகள்

பண்புக்கூறு விளக்கம்
disabled உள்ளீட்டு உறுப்பு முடக்கப்பட வேண்டும் என்பதைக் குறிக்கிறது
max ஒரு உள்ளீட்டு உறுப்பின் அதிகபட்ச மதிப்பைக் குறிக்கிறது
min ஒரு உள்ளீட்டு உறுப்பின் குறைந்தபட்ச மதிப்பைக் குறிக்கிறது
pattern ஒரு உள்ளீட்டு உறுப்பின் மதிப்பு முறையைக் குறிக்கிறது
required உள்ளீட்டு புலத்திற்கு ஒரு உறுப்பு தேவைப்படுகிறது என்பதைக் குறிக்கிறது
type ஒரு உள்ளீட்டு உறுப்பின் வகையைக் குறிக்கிறது

📝 குறிப்பு:

முழு பட்டியலுக்கு, Jassif Team HTML உள்ளீட்டு பண்புக்கூறுகள் பக்கத்திற்குச் செல்லவும்.

கட்டுப்பாடு சரிபார்ப்பு CSS சூடோ தேர்ந்தெடுப்பாளர்கள்

தேர்ந்தெடுப்பாளர் விளக்கம்
:disabled "disabled" பண்புக்கூறு குறிப்பிடப்பட்ட உள்ளீட்டு உறுப்புகளைத் தேர்ந்தெடுக்கிறது
:invalid தவறான மதிப்புகளைக் கொண்ட உள்ளீட்டு உறுப்புகளைத் தேர்ந்தெடுக்கிறது
:optional "required" பண்புக்கூறு இல்லாத உள்ளீட்டு உறுப்புகளைத் தேர்ந்தெடுக்கிறது
:required "required" பண்புக்கூறு குறிப்பிடப்பட்ட உள்ளீட்டு உறுப்புகளைத் தேர்ந்தெடுக்கிறது
:valid செல்லுபடியான மதிப்புகளைக் கொண்ட உள்ளீட்டு உறுப்புகளைத் தேர்ந்தெடுக்கிறது

📝 குறிப்பு:

முழு பட்டியலுக்கு, Jassif Team CSS சூடோ வகுப்புகள் பக்கத்திற்குச் செல்லவும்.

பயிற்சி

❓ ஆவணத்தின் அனைத்து படிவ உறுப்புகளையும் திருப்பித் தருவதற்கான சட்டபூர்வமான தொடரியல் எது?

document.forms;
✓ சரி! document.forms என்பது ஆவணத்தில் உள்ள அனைத்து படிவ உறுப்புகளையும் திருப்பித் தரும் சட்டபூர்வமான DOM பண்பாகும்
document.all('form');
✗ தவறு! document.all() என்பது HTML DOM இல் சட்டபூர்வமான முறை அல்ல
document.getForms();
✗ தவறு! getForms() என்பது HTML DOM இல் சட்டபூர்வமான முறை அல்ல