Input Validation Techniques in HTML
Uploaded by
Mizanur Rahman SajidInput Validation Techniques in HTML
Uploaded by
Mizanur Rahman SajidTask 1 – Textbox with Maximum Character Entry
Limits the input to 20 characters and shows how many characters the user can still type.
Code:
<!DOCTYPE html>
<html>
<title>Maximum Character Entry</title>
<body style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
<h3>Enter Character</h3>
<input type="text" id="txt" maxlength="20" oninput="countChars()">
<p id="remain">20 characters left</p>
<script>
// update remaining count
function countChars() {
let max = 20;
let used = [Link]("txt").[Link];
[Link]("remain").textContent = (max - used) + "
characters left";
}
</script>
</body>
</html>
Output:
Task 2 – Minimum Character Validation
Checks that the textbox has at least 5 characters before allowing submission.
Code:
<!DOCTYPE html>
<html>
<body style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
<h3>Minimum Character Check</h3>
<input type="text" id="txt">
<button onclick="checkLen()">Submit</button>
<script>
// ensure minimum 5 chars
function checkLen() {
if ([Link]("txt").[Link] < 5) {
alert("Enter at least 5 characters.");
} else alert("Valid.");
}
</script>
</body>
</html>
Output:
Task 3 – Allow Only Characters
Prevents the user from typing anything other than A–Z or a–z letters.
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Accepts characters only</h3>
<input id="text" placeholder="Alphabets only">
<button onclick="[Link] = [Link]">Submit</button>
<p id="result"></p>
<script>
// This function keeps only alphabet characters while typing
[Link] = () => [Link] = [Link](/[^a-zA-Z]/g,
"");
</script>
</body>
</html>
Output:
Task 4 – Allow Only Numbers
Blocks all input except digits from 0 to 9.
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Accepts only numbers</h3>
<input id="num" placeholder="Numbers only">
<button onclick="show()">Submit</button>
<p id="result"></p>
<script>
// keep only numbers
[Link] = () => [Link] = [Link](/[^0-9]/g, "");
function show() {
[Link] = "You entered: " + [Link];
}
</script>
</body>
</html>
Output:
Task 5 – Allow Alphanumeric Only
Allows letters and numbers but removes any symbols or special characters.
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Only Numbers & Characters</h3>
<input id="inputBox" placeholder="Letters and numbers only">
<button onclick="showOutput()">Submit</button>
<p id="result"></p>
<script>
// allow only A–Z and 0–9
[Link] = () => [Link] = [Link](/[^A-Za-
z0-9]/g, "");
function showOutput() {
[Link] = "You entered: " + [Link];
}
</script>
</body>
</html>
Output:
Task 6 – Mandatory Textbox Validation
Ensures the field is not empty before submitting the form.
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Must Submit Text</h3>
<input type="text" id="txt">
<button onclick="validate()">Submit</button>
<script>
// ensure field not empty
function validate() {
if ([Link]("txt").[Link]() === "") {
alert("Field is required.");
} else alert("Valid.");
}
</script>
</body>
</html>
Output:
Task 7 – Email Validation
Checks whether the entered text follows a proper email format like
[name@[Link]]([Link]
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Check Email</h3>
<input type="text" id="email">
<button onclick="checkEmail()">Submit</button>
<script>
// simple email format check
function checkEmail() {
let e = [Link]("email").value;
let ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
alert(ok ? "Valid email." : "Invalid email.");
}
</script>
</body>
</html>
Output:
Task 8 – Checkbox and Dropdown Validation
Requires the checkbox to be checked and a dropdown option to be selected before submitting.
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Checkbox and Dropdown</h3>
<div id="box"></div><br>
<input type="checkbox" id="agree"> Agree?
<br><br>
<button onclick="check()">Submit</button>
<script>
// create dropdown using JS
[Link] = `
<select id="dept">
<option value="">Select</option>
<option>CSE</option>
<option>EEE</option>
<option>CE</option>
</select>
`;
function check() {
if (![Link]) return alert("Check the box.");
if (![Link]) return alert("Choose an option.");
alert("Valid.");
}
</script>
</body>
</html>
Output:
Task 9 – Radio Button Validation
Makes sure that at least one radio option is selected.
Code:
<!DOCTYPE html>
<html>
<body>
<input type="radio" name="g" value="M"> Male
<input type="radio" name="g" value="F"> Female
<br><br>
<button onclick="checkRadio()">Submit</button>
<script>
// ensure at least one radio selected
function checkRadio() {
let selected = [Link]('input[name="g"]:checked');
alert(selected ? "Valid." : "Select a radio option.");
}
</script>
</body>
</html>
Output:
Task 10 – Mobile Number Validation
Validates that the number matches the Bangladeshi mobile format starting with +880 or 01 and
containing 11 digits.
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Mobile Number Check</h3>
<input id="mob">
<button onclick="check()">Submit</button>
<script>
function check() {
alert(/^(?:\+8801|01)\d{9}$/.test([Link]) ? "Valid number." :
"Invalid number.");
}
</script>
</body>
</html>
Output:
Task 11 – Enable/Disable Submit Button
Keeps the Submit button disabled until all fields are correctly filled.
Code:
<!DOCTYPE html>
<html>
<body>
<input id="nameBox" placeholder="Name" oninput="check()"><br><br>
<input id="emailBox" placeholder="Email" oninput="check()"><br><br>
<button id="btn" enbale onclick="show()">Submit</button>
<p id="result"></p>
<script>
function check() {
[Link] = !([Link]() &&
/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test([Link]));
}
function show() {
[Link] = "Name: " + [Link] + " | Email: " +
[Link];
}
</script>
</body>
</html>
Output:
Task 12 – Check if Checkbox Is Checked
Shows an alert whenever the checkbox is checked or unchecked.
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Check Checkbox</h3>
<input type="checkbox" id="c" onchange="check()"> Check me
<script>
// alert on toggle
function check() {
alert([Link]("c").checked ? "Checked" : "Unchecked");
}
</script>
</body>
</html>
Output:
Task 13 – Dynamic Dropdown Example
Automatically updates the department list based on the selected faculty.
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Dynamic Dropdown</h3>
<select id="faculty" onchange="load()">
<option value="">Select Faculty</option>
<option value="eng">Engineering</option>
<option value="bus">Business</option>
</select>
<select id="dept">
<option value="">Select Department</option>
</select>
<script>
let data = { eng:["CSE","EEE","ME"], bus:["BBA","MBA"] };
function load() {
[Link] = "<option value=''>Select Department</option>" +
(data[[Link]] || []).map(x =>
`<option>${x}</option>`).join("");
}
</script>
</body>
</html>
Output:
Task 14 – Alert Message
Displays a success message when the form is submitted correctly.
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Alert Message</h3>
<form onsubmit="done(); return false;">
<input type="text" required>
<button>Submit</button>
</form>
<script>
// show success message
function done() {
alert("Form submitted successfully!");
}
</script>
</body>
</html>
Output: