Answer to Question #327070 in HTML/JavaScript Web Application for Suresh

Question

Answer to Question #327070 in HTML/JavaScript Web Application for Suresh

Question #327070

CCBP login

When the submit is clicked and the value of the HTML input elements with I'd names is empty and password is not empty then the text content in the HTML paragraph elements with I'd name ErrMsg and resultMsg should have an error message and "Fill in the required details " respectively

When the submit is clicked and the value of the HTML input elements with I'd name is empty and password is not empty then the text content in the HTML paragraph elements with I'd password ErrMsg and resultMsg should have an error message and "Fill in the required details " respectively

*This cases are not executed getting error please help*

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 #327070 in HTML/JavaScript Web Application for Suresh

Comments

Leave a comment

Related Questions