TechQA.

Inline error message still displayed after the user adds text to input fields

697 views Asked by At

When users click submit, I've coded an error message to appear under each input field that is missing a value using DOM selectors. I also disabled the email file that opens when submit is clicked, using preventDefault().

However, when the user types into the text area, the messages don't disappear. I tried using a 'keydown' event, but I couldn't get it to work.

HTML code:

<body>
    <header class="header">

        <form action="mailto:[email protected]">
            <fieldset>

                <legend>Personal details</legend>
                <p>
                    <label>
                        Full name:
                        <input type="text" name="fullname" id="fullname">
                    </label>
                </p>
                <p class="errormsg" id="nameerrormsg">Please enter your name above</p>

                <p>
                    <label>
                        Street Address:
                        <input type="text" name="streetaddr" id="streetaddr">
                    </label>
                </p>
                <p class="errormsg" id="addrerrormsg">Please enter your street address</p>

            </fieldset>
            <input type="submit" value="Submit it!" class="submitIt" onsubmit="return checkForm();">
        </form>
        <br>

        <script src="inline-error.js" charset="utf-8"></script>

        <div class="returnHome">
            <a href="javascript:history.back()">Return Home</a>
        </div>
    </header>
</body>

Javascript code:

var submitIt = document.querySelector(".submitIt");
submitIt.addEventListener("click", function checkForm(event) {
    var fNameInput = document.querySelector("#fullname")
    var streetAddInput = document.querySelector("#streetaddr")
    if (fNameInput.value == "") {
        var nameErrorMsg = document.querySelector("#nameerrormsg").style.display = "block";
        event.preventDefault();
    }
    if (streetAddInput.value == "") {
        var addrErrorMsg = document.querySelector("#addrerrormsg").style.display = "block";
        event.preventDefault();
    }
})
javascript html keydown submit-button queryselector
Original Q&A
1

There are 1 answers

1
Matt Rose On

To see an immediate result in the code in its current state, hide the error messages before checking the input values.

var submitIt = document.querySelector('.submitIt');
submitIt.addEventListener('click', function checkForm(event) {
    var nameErrorMsg = document.querySelector('#nameerrormsg');
    var addrErrorMsg = document.querySelector('#addrerrormsg');

    nameErrorMsg.style.display = 'none';
    addrErrorMsg.style.display = 'none';

    var fNameInput = document.querySelector('#fullname');
    var streetAddrInput = document.querySelector('#streetaddr');

    if (fNameInput.value == '') {
        nameErrorMsg.style.display = 'block';
        event.preventDefault();
    }
    if (streetAddrInput.value == '') {
        addrErrorMsg.style.display = 'block';
        event.preventDefault();
    }       
});

Having said that, here are some additional suggestions:

  • Use CSS for styling elements (not JavaScript)
  • Discourage inline JavaScript
  • Store DOM elements outside the scope of the event listener so you don't have to query the DOM every time you click
  • Consider utilizing the required attribute on the inputs for a quick win on styling

So...

<!-- form.html -->
<head>
    <link rel="stylesheet" href="form.css">
</head>
<body>
    <header class="header">
        <form>
            <fieldset>
                <legend>Personal details</legend>
                <p>
                    <label for="fullname">Full name:
                        <input type="text" name="fullname" id="fullname" required>
                    </label>
                </p>
                <p class="errormsg" id="nameerrormsg">Please enter your name above</p>
                <p>
                    <label for="streetaddr">Street Address:
                        <input type="text" name="streetaddr" id="streetaddr" required>
                    </label>
                </p>
                <p class="errormsg" id="addrerrormsg">Please enter your street address</p>
            </fieldset>
            <input type="submit" value="Submit it!" class="submitIt">
        </form>
    </header>
    <button id="returnhome">Return Home</button>
    <script src="inline-error.js"></script>
</body>

/* form.css */
input:valid {
    border: none;
}
input:invalid:required {
    border: 1px solid red;
}

.errormsg {
    display: none;
}

.show {
    display: block;
}

// inline-error.js
var submitIt = document.querySelector('.submitIt');
var nameInput = document.querySelector('#fullname');
var nameError = document.querySelector('#nameerrormsg');
var addrInput = document.querySelector('#streetaddr');
var addrError = document.querySelector('#addrerrormsg');
var returnHome = document.querySelector('#returnhome');

returnHome.addEventListener('click', e => {
    e.preventDefault();
    history.back();
});

submitIt.addEventListener('click', event => {
    const nameValue = nameInput.value;
    const addrValue = addrInput.value;

    if (!nameValue || !addrValue) {
        event.preventDefault();
    }

    if (!nameValue) {
        nameError.classList.add('show');
    } else {
        nameError.classList.remove('show');
    }

    if (!addrValue) {
        addrError.classList.add('show');
    } else {
        addrError.classList.remove('show');
    }
});

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in KEYDOWN

Related Questions in SUBMIT-BUTTON

Related Questions in QUERYSELECTOR

Popular Questions

Trending Questions