Scribd
Upload
9 views6 pages

Experiment 6

Uploaded by

Devolop Agae
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views6 pages

Experiment 6

Uploaded by

Devolop Agae
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Experiment 6: HTML, JS form validation

Source code:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation</title>

<style>* {

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f4f6f8;

.form-container {

width: 100%;

max-width: 400px;

background: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}
h2 {

text-align: center;

color: #333;

label {

display: block;

margin-top: 10px;

font-weight: bold;

color: #333;

input[type="text"],

input[type="number"],

select {

width: 100%;

padding: 8px;

margin-top: 5px;

border: 1px solid #ccc;

border-radius: 4px;

font-size: 1rem;

.radio-group {

display: flex;

gap: 10px;

margin-top: 5px;

button[type="submit"] {
width: 100%;

padding: 10px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 4px;

font-size: 1rem;

cursor: pointer;

margin-top: 15px;

button[type="submit"]:hover {

background-color: #45a049;

.error {

color: red;

font-size: 0.875rem;

</style>

</head>

<body>

<h2>Form Validation Example</h2>

<form id="myForm" onsubmit="return validateForm()">

<!-- Text Input -->

<label for="username">Username (required):</label>

<input type="text" id="username" name="username">

<span id="usernameError" style="color: red;"></span>

<br><br>

<!-- Number Input -->


<label for="age">Age (between 18 and 100):</label>

<input type="number" id="age" name="age" min="18" max="100">

<span id="ageError" style="color: red;"></span>

<br><br>

<!-- Select -->

<label for="country">Country (required):</label>

<select id="country" name="country">

<option value="">Select your country</option>

<option value="US">United States</option>

<option value="CA">Canada</option>

<option value="UK">United Kingdom</option>

</select>

<span id="countryError" style="color: red;"></span>

<br><br>

<!-- Radio Buttons -->

<label>Gender:</label>

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label>

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label>

<span id="genderError" style="color: red;"></span>

<br><br>

<button type="submit">Submit</button>

</form>

<script>function validateForm() {
let isValid = true;

// Username validation

const username = document.getElementById("username").value;

const usernameError = document.getElementById("usernameError");

if (username.trim() === "") {

usernameError.textContent = "Username is required.";

isValid = false;

} else {

usernameError.textContent = "";

// Age validation

const age = document.getElementById("age").value;

const ageError = document.getElementById("ageError");

if (age === "" || age < 18 || age > 100) {

ageError.textContent = "Age must be between 18 and 100.";

isValid = false;

} else {

ageError.textContent = "";

// Country validation

const country = document.getElementById("country").value;

const countryError = document.getElementById("countryError");

if (country === "") {

countryError.textContent = "Please select your country.";

isValid = false;

} else {

countryError.textContent = "";

}
// Gender validation

const gender = document.querySelector('input[name="gender"]:checked');

const genderError = document.getElementById("genderError");

if (!gender) {

genderError.textContent = "Please select your gender.";

isValid = false;

} else {

genderError.textContent = "";

return isValid; // Return false if any validation failed, else true

}</script>

</body>

</html>

Output:

You might also like