Untitled

<!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...