Untitled
unknown
plain_text
2 years ago
3.6 kB
4
Indexable
<head>
<title>Information</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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 nameInput = document.getElementById('name');
var charCountElement = document.getElementById('name-char-count');
var remainingChars = 50 - nameInput.value.length;
charCountElement.textContent = 'Characters remaining: ' + remainingChars;
}
</script>
</head>