Answer to Question #327065 in HTML/JavaScript Web Application for Bylapati suresh kumar

Question

Answer to Question #327065 in HTML/JavaScript Web Application for Bylapati suresh kumar

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #327065

CCBP login

If the value of HTML input elements with ids name and password are not empty then the text content in the HTML paragraph element with id resultMsg should be displayed as Login Success. Otherwise, it should be displayed as Fill in the required details.

this case error

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div class="wrapper">
        <div class="container">
            <h1 class="form-heading title">CCBP Login</h1>
            <form class="form" id="myForm" onsubmit="formSubmit(this)">
                <div class="form-group username">
                    <label for="name" class="username-heading">User Name</label>
                    <input autocomplete="off" type="text" id="name" class="input" onblur="blurInput(this)">
                    <p class="hidden error error-message" id="nameErrMsg">Required*</p>
                </div>
                <div class="form-group password">
                    <label for="password" class="password-heading">Password</label>
                    <input type="password"  id="password" class="input" onblur="blurInput(this)">
                    <p class="hidden error" id="passwordErrMsg">Required*</p>
                </div>
                <div class="form-group">
                    <button type="submit">Submit</button>
                    <p class="hidden" id="resultMsg">Fill in the required details</p>
                </div>
            </form>
        </div>
    </div>



    <style>
        .wrapper {
            width: 100%;
            min-height: 100vh;
        }
        .container {
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
        }
        .hidden {
            opacity: 0;
        }
        .error {
            color: red;
        }
        .title {
            text-align: center;
            margin-bottom: 36px;
        }
        .form {
            text-align: center;
            width: 250px;
            margin: 0 auto;
        }
        .form-group {
            display: flex;
            flex-flow: column wrap;
            justify-content: flex-start;
            align-items: flex-start;
        }
        input {
            margin-top: 10px;
        }
        button {
            width: 80px;
            height: 50px;
            background-color: #0073CF;
            color: #fff;
        }
    </style>


    <script>
        function formSubmit(form) {
            event.preventDefault();


            let msg = document.getElementById('resultMsg');


            if (form.name.value != '' && form.password.value != '') {
                let messages = document.querySelectorAll('.form-group p');


                messages.length > 0 ? messages.forEach(item => item.classList.add('hidden')) : '';
                msg.innerText = 'Login Success';
                msg.classList.remove('hidden');
            } else {
                msg.innerText = 'Fill in the required details';
                msg.classList.remove('hidden');


                if (form.name.value == '') {
                    let errorMessage = (form.name).closest('.form-group').querySelector('p');
                    errorMessage.classList.remove('hidden');
                }
                if (form.password.value == '') {
                    let errorMessage = (form.password).closest('.form-group').querySelector('p');
                    errorMessage.classList.remove('hidden');
                }
            }
        }


        function blurInput(input) {
            let parent = input.closest('.form-group');
            let msg = parent.querySelector('p');


            if (input.value == '') {
                msg.classList.remove('hidden');
            } else {
                msg.classList.add('hidden');
            }
        }
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #327065 in HTML/JavaScript Web Application for Bylapati suresh kumar

Comments

Leave a comment

Related Questions