Untitled
unknown
plain_text
2 years ago
5.5 kB
10
Indexable
<!DOCTYPE html> <html> <head> <title>Information</title> <link rel="stylesheet" type="text/css" href="style.css"> <script> function validateForm() { var name = document.getElementById('name').value; var dob = document.getElementById('dob').value; var gender = document.querySelector('input[name="gender"]:checked'); var email = document.getElementsByName('email')[0].value; var address = document.getElementById('address').value; var hobbies = document.querySelectorAll('input[name="hobbies"]:checked'); var nameError = document.getElementById('name-error'); var dobError = document.getElementById('dob-error'); var genderError = document.getElementById('gender-error'); var emailError = document.getElementById('email-error'); var addressError = document.getElementById('address-error'); var hobbiesError = document.getElementById('hobbies-error'); nameError.innerHTML = ''; dobError.innerHTML = ''; genderError.innerHTML = ''; emailError.innerHTML = ''; addressError.innerHTML = ''; hobbiesError.innerHTML = ''; if (name === '') { nameError.innerHTML = 'Please enter your name.'; } else if (name.length > 50) { nameError.innerHTML = 'Name should not exceed 50 characters.'; } if (dob === '') { dobError.innerHTML = 'Please enter your date of birth.'; } else { var currentDate = new Date(); var selectedDate = new Date(dob); if (selectedDate > currentDate) { dobError.innerHTML = 'Date of birth cannot be in the future.'; } } if (!gender) { genderError.innerHTML = 'Please select your gender.'; } if (email === '') { emailError.innerHTML = 'Please enter your email.'; } else { var emailRegex = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/; if (!emailRegex.test(email)) { emailError.innerHTML = 'Invalid email format.'; } } if (address === '') { addressError.innerHTML = 'Please enter your address.'; } if (hobbies.length === 0) { hobbiesError.innerHTML = 'Please select at least one hobby.'; } // Check if there are any error messages if (nameError.innerHTML !== '' || dobError.innerHTML !== '' || genderError.innerHTML !== '' || emailError.innerHTML !== '' || addressError.innerHTML !== '' || hobbiesError.innerHTML !== '') { return false; } // If all validations pass, the form will be submitted return true; } function updateCharacterCount() { var addressInput = document.getElementById('address'); var charCountElement = document.getElementById('address-char-count'); var remainingChars = 50 - addressInput.value.length; charCountElement.textContent = 'Characters remaining: ' + remainingChars; } </script> </head> <body> <form action="form" method="post" onsubmit="return validateForm();"> <label for="name">Your name:</label> <input type="text" id="name" name="name" placeholder="Enter name here" /><br /> <span id="name-error" class="error-message"></span> <label for="dob">Date of Birth:</label> <input type="date" id="dob" name="dob"><br /> <span id="dob-error" class="error-message"></span> <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><br /> <span id="gender-error" class="error-message"></span> <label for="email">Email:</label> <input type="text" name="email" placeholder="example@gmail.com" /><br /> <span id="email-error" class="error-message"></span> <label for="address">Address:</label> <textarea id="address" name="address" rows="8" cols="30" maxlength="50" oninput="updateCharacterCount()" placeholder="Enter address here"></textarea><br /> <span id="address-char-count" class="character-count"></span> <span id="address-error" class="error-message"></span> <label>Hobbies:</label> <br> <label for="game">Game</label> <input type="checkbox" id="game" name="hobbies" value="game" /><br /> <label for="sport">Sport</label> <input type="checkbox" id="sport" name="hobbies" value="sport" /><br /> <label for="reading-book">Reading book</label> <input type="checkbox" id="reading-book" name="hobbies" value="reading book" /><br /> <label for="shopping">Shopping</label> <input type="checkbox" id="shopping" name="hobbies" value="shopping" /><br /> <span id="hobbies-error" class="error-message"></span> <input type="submit" value="Submit"> </form> </body> </html>
Editor is loading...