Day 6: JavaScript – Working with Forms & Form Validation
Innu nammude sessionil JavaScript Forms and Form Validation enthanu, athu engane work cheyyunnu ennathine patti padikkan pokunnu.
🔹 1. HTML Form Enthinu?
HTML form upayogichu *user input edukkan* kazhiyum. Example:
<form>
<input type="text" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
🔹 2. JavaScript Upayogichu Form Handle Cheyyan
JavaScript koduthal *interactive form experience* provide cheyyan sahayikkum. Example: *Form submit cheyyumbo user input validate cheyyuka*.
📌 2.1 Accessing Form Elements
Oru HTML form element JavaScript upayogichu access cheyyan:
let nameInput = document.getElementById("name");
console.log(nameInput.value); // User enter cheytha data console il print aakum
📌 2.2 Prevent Default Form Submission
HTML form submit cheyyumbo page refresh aakum. Ath prevent cheyyan:
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent default refresh
alert("Form submitted!");
});
🔹 3. Form Validation – Input Verify Cheyyan
Form submit cheyyumbo *valid data aanu submit cheyyunnathoo?* Enn nokkan Form Validation upayogikkam.
📌 3.1 Required Field Check
Oru field empty aano enn nokkan:
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault();
let name = document.getElementById("name").value;
if(name === "") {
alert("Please enter your name.");
} else {
alert("Form submitted successfully!");
}
});
📌 3.2 Email Validation
Email correct format il aano enn nokkan regex upayogikkam:
let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if(!email.match(emailPattern)) {
alert("Enter a valid email address.");
}
🔹 4. Full Example – Registration Form
🎯 Conclusion
Innu nammude session-il padichathu:
- Form Elements – JavaScript upayogichu data access cheyyuka
- Form Validation – Required fields, email validation, password validation
- Real-World Example – User registration form
🔥 Next session: JavaScript Advanced Topics – Don't miss it!