HTML Form Validation (ഫോം ഡാറ്റ സാധൂകരണം) എന്താണ്?
HTML ഫോമുകൾ ഉപയോഗിച്ചുള്ള ഡാറ്റ സാധൂകരണം (Validation) ഉപയോക്താവിന്റെ ഡാറ്റ ശരിയായി നൽകപ്പെട്ടിട്ടുണ്ടോ എന്ന് പരിശോധിക്കാനുള്ള പ്രക്രിയയാണ്. Form validation ഉപയോഗിച്ച്, ആവശ്യമായ ഫീൽഡുകൾ നിറക്കിയിട്ടില്ലെങ്കിൽ, ഫോം സമർപ്പിക്കുന്നത് തടയാം. സാധൂകരണം ക്ലയന്റ്സൈഡിൽ (ഉപയോക്താവിന്റെ ബ്രൗസറിൽ) HTML5-ൽ തന്നെ നിഷ്പ്രയാസം നടത്താനാകും.
HTML5 Form Validation Attributes:
HTML5 നിഷ്ക്രിയമായ മൂല്യങ്ങൾ നൽകുന്ന Attributes ഉപയോഗിച്ച് ഫോമിന്റെ സാധൂകരണം എളുപ്പത്തിൽ കൈകാര്യം ചെയ്യാൻ കഴിയും.
Required Attribute:
ഈ Attribute ഉപയോഗിച്ച് ഒരു ഇൻപുട്ട് ഫീൽഡ് നിർബന്ധമായും നിറക്കണമെന്നു ഉറപ്പാക്കാം.
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>
Example:
<form>
<label for="email">ഇമെയിൽ:</label>
<input type="email" id="email" name="email" required>
<button type="submit">സമർപ്പിക്കുക</button>
</form>
Pattern Attribute:
Pattern Attribute ഒരു ഫീൽഡിൽ നൽകേണ്ട ടെക്സ്റ്റ് ഒരു പ്രത്യേക ഫോർമാറ്റിൽ തന്നെയായിരിക്കണമെന്ന് ഉറപ്പാക്കുന്നു. Regular Expressions (regex) ഉപയോഗിച്ച് ടെക്സ്റ്റ് ഫോർമാറ്റ് സാധൂകരിക്കാം.
<form>
<label for="username">Username (letters only):</label>
<input type="text" id="username" name="username" pattern="[A-Za-z]+" required>
<button type="submit">Submit</button>
</form>
Minlength and Maxlength:
ഒരു ഇൻപുട്ട് ഫീൽഡിൽ അനുവദിക്കുന്ന ടെക്സ്റ്റിന്റെ കുറഞ്ഞ അളവ് (minlength) ആയും പരമാവധി അളവ് (maxlength) ആയും നിശ്ചയിക്കാം.
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="6" maxlength="12" required>
<button type="submit">Submit</button>
</form>
Number Validation: Min and Max Attributes:
<input type="number">-നെക്കുറിച്ചുള്ള ഫീൽഡുകൾക്ക് min & max Attributes ഉപയോഗിച്ച് നൽകിയ സംഖ്യകൾക്ക് താഴെയോ മുകളിലോ പോകുന്നത് തടയാം.
<form>
<label for="age">Age (18-60):</label>
<input type="number" id="age" name="age" min="18" max="60" required>
<button type="submit">Submit</button>
</form>
Input Type Validation:
HTML5-ൽ <input> ടാഗിന് പല തരത്തിലുള്ള Input Types ഉണ്ട്. ഓരോ Input Type-നും വ്യത്യസ്ത സാധൂകരണം കൊണ്ട് നിയന്ത്രിക്കാം.
- Email:
<input type="email" required>
- URL:
<input type="url" required>
- Tel (Phone Numbers):
<input type="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" placeholder="123-45-678">
CSS Pseudo Classes:
HTML5 Form Validation CSS-ഉടനെയും ഫീൽഡുകളുടെ സാധൂകരണം മെച്ചപ്പെടുത്താം. ഉദാഹരണത്തിന്, :invalid പാസുഡോ ക്ലാസ് ഉപയോഗിച്ച് അയോഗ്യമായ ഇൻപുട്ടുകൾക്ക് സ്റ്റൈൽ നൽകാം.
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
Custom Validation Messages:
ഡിഫോൾട്ട് ഫോമിന്റെ സാധൂകരണം കൈകാര്യം ചെയ്യുമ്പോൾ, ഉപയോക്താവിന് അനുകൂലമായ മെസ്സേജ് നൽകാൻ setCustomValidity() ഉപയോഗിക്കാം.
<form onsubmit="return validateForm()">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
var email = document.getElementById('email');
if (!email.checkValidity()) {
email.setCustomValidity('ദയവായി സാധുവായ ഒരു ഇമെയിൽ വിലാസം നൽകുക.');
return false;
} else {
email.setCustomValidity('');
}
return true;
}
</script>
JavaScript വഴി ഫോമിന്റെ സാധൂകരണം:
JavaScript ഉപയോഗിച്ച് കൂടുതൽ നിയന്ത്രണം നൽകാൻ സാധൂകരണം നടത്താം.
<form name="myForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
var x = document.forms["myForm"]["name"].value;
if (x == "") {
alert("പേര് ഫീൽഡ് നിറയ്ക്കണം");
return false;
}
return true;
}
</script>
JavaScript Form Validation Methods:
checkValidity(): ഫീൽഡുകൾക്ക് HTML5-ലെ ഡിഫോൾട്ട് Validation തികച്ചിട്ടുണ്ടോ എന്ന് പരിശോധിക്കുന്നു.setCustomValidity(): ഉപയോക്തൃ-നിർവചിച്ച Validation Message നൽകുന്നു.
സങ്കലനം:
HTML5 ഫോമിന്റെ സാധൂകരണം എളുപ്പവും പ്രായോഗികവുമാണ്, ഇത് ഉപയോക്താക്കളുടെ ഡാറ്റ ശരിയായ ഫോർമാറ്റിൽ നൽകിയിരിക്കുമെന്നുറപ്പാക്കുന്നു. HTML5 Attributes ഉപയോഗിച്ച് സാധൂകരണം നിഷ്ക്രിയമായ രീതിയിൽ കൈകാര്യം ചെയ്യാം, JavaScript ഉപയോഗിച്ച് കൂടുതൽ ഫ്ലെക്സിബിലിറ്റിയും അഡ്വാൻസ്ഡ് Validation-ഉം നൽകാൻ കഴിയും.
