Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
3.6 kB
4
Indexable
Never
<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>