Answer to Question #301356 in HTML/JavaScript Web Application for eranna

Question

Answer to Question #301356 in HTML/JavaScript Web Application for eranna

Question #301356

Include form validation for name and email. (a) Name field should take first name and last name seperated by a space. The first character of first name and the first character of last name should be in capital. Other characters should be small letters. Digits and special characters are not allowed. Eg: A Amar, Amar A, Amar Amar are valid. But a amar, A. Amar are invalid. (b) email id should be of the form eid@nitk.ac.in eid can have alphabets, numbers, underscores and dots. But eid should start with a letter and end with a letter or a number. It cannot have underscores and dots at the beginning and end of eid. It should then match for @nitk.ac.in. On invalid entry, you can show the specific error besides the field in red color.

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> 
    <title>Page</title>
</head>
<body>
    <style>
        * {
            font-family: 'Roboto', sans-serif;
            padding: 0;
            margin: 0;
        }
        .wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
        }
        .wrapper > * {
            margin: 5px 0;
        }
        input {
            height: 40px;
            width: 200px;
            padding: 5px;
            font-size: 16px;
        }
        button {
            width: 150px;
            height: 40px;
            background: rgb(255, 209, 124);
            outline: none;
            border: none;
            border-radius: 5px;
            color: rgb(37, 37, 37);
            cursor: pointer;
        }
        button:hover {
            border: 1px solid rgb(31, 31, 31)
        }
        .errorMessage {
            color: red;
            font-size: 14px;
        }
    </style>
    <div class="wrapper">
        <input type="text" placeholder="Name" class="name">
        <div class="errorMessage errorMessageName"></div>
        <input type="text" placeholder="Email" class="email">
        <div class="errorMessage errorMessageEmail" ></div>
        <button>Login</button>
        
    </div>
    <script>
        const name = document.querySelector('.name'),
              email = document.querySelector('.email'),
              btn = document.querySelector('button'),
              errorName = document.querySelector('.errorMessageName'),
              errorEmail = document.querySelector('.errorMessageEmail')

        function firstSymbol(str) {
            return /^[A-Z]/.test(str)
        }

        function isAlpha(str) {
            return /^[a-z]+$/i.test(str)
        }

        function isLower(str) {
            return str.toLowerCase() === str
        }

        function checkName() {
            const arr = name.value.split(' ')
            let status = true
            if (arr.length == 2) {
                arr.forEach(e => {
                    if (!firstSymbol(e))
                        status = false
                    else
                        if (e.substring(1).length != 0)
                            if (!isAlpha(e.substring(1)) || !isLower(e.substring(1)))
                                status = false

                });
            } else status = false

            return status
        }

        function checkEmail() {
            const arr = email.value.split('@')
            let status = true
            if (arr.length == 2) {
                if (!/^[A-Za-z]/.test(arr[0]) || !/[A-Za-z0-9]$/.test(arr[0]) || arr[1] !== 'nitk.ac.in')
                    status = false
            } else status = false

            return status
        }
        btn.addEventListener('click', () => {
            if (!checkName()) {
                name.style.background = '#ffb0b0'
                errorName.innerHTML = 'Wrong name'
            } else {
                name.style.background = 'white'
                errorName.innerHTML = ''
            }


            if (!checkEmail()) {
                email.style.background = '#ffb0b0'
                errorEmail.innerHTML = 'Wrong email'
            } else {
                email.style.background = 'white'
                errorEmail.innerHTML = ''
            }
        })
    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #301356 in HTML/JavaScript Web Application for eranna

Comments

Leave a comment

Related Questions