input value undefined javascript

Question

I want to show an error message when text box is empty on submit, but is not working and everytime I try to get the value through the console area returns undefined.

CSS

<style>
    #error_alert {
        visibility: hidden;
        border: 1px solid #F00;
        text-align: center;
        width: 100px;
    }

    label,
    input,
    button {
        display: block;
        margin: 2px;
    }
</style>

Javascript

    <script>
    function validate() {
        var inputName = document.getElementsByName("fName")
        if (inputName.value == " ") {
            document.getElementById("error_alert").style.visibility = "visible";
        }
    }
    </script>

Html

<body>
    <h1>Titulo</h1>
    <p id="error_alert">invalid name</p>
    <label>Name:</label>
    <input type="text" name="fName" />
    <label>e-mail:</label>
    <input type="email">
    <button onClick="validate()" type="button">Enviar</button>
</body>

PS: When I added x == null || as an opntion on the condition the message would turn visible everytime even when i had something written in the textarea.

[`getElementsByName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName) returns an array-like object, not a single element. — Teemu, Jun 11 '15 at 18:47
@Teemu Correct.. @OP also `" "` is not blank condition but `""` this is. — vinayakj, Jun 11 '15 at 19:03

score 4 · Accepted Answer · answered Jun 11 '15 at 18:50

Its getElementsByName so you are getting list of DOM elements, you need to select the particular one out of list.

function validate() {
        var inputName = document.getElementsByName("fName")[0];
        if (inputName.value == "") {
            document.getElementById("error_alert").style.visibility = "visible";
        }
    }

 #error_alert {
        visibility: hidden;
        border: 1px solid #F00;
        text-align: center;
        width: 100px;
    }

    label,
    input,
    button {
        display: block;
        margin: 2px;
    }

<h1>Titulo</h1>
    <p id="error_alert">invalid name</p>
    <label>Name:</label>
    <input type="text" name="fName" />
    <label>e-mail:</label>
    <input type="email">
    <button onClick="validate()" type="button">Enviar</button>

score 3 · Answer 2 · answered Jun 11 '15 at 18:50

getElementsByName() returns an array, so your comparison to " " is invalid. It would be easier if you add an id to your input as well, then you can use getElementById() instead. It returns a single value that you can then compare with as you are.

<input type="text" name="fName" id="fName" />

var inputName = document.getElementById("fName");

score 3 · Answer 3 · answered Jun 11 '15 at 18:51

3

Change:

if (inputName.value == " ") {

To:

if (inputName.value[0] == "") {

answered Jun 11 '15 at 18:51

programking

1,376
1
17
32

score 3 · Answer 4 · answered Jun 11 '15 at 18:51

When you use document.getElementsByName, it returns an array, hence input.value will not work.

Try the following -
function validate() {
   var inputName = document.getElementsByName("fName")
        if (inputName[0].value == "") {
            document.getElementById("error_alert").style.visibility = "visible";
        }
    }
}

input value undefined javascript

4 Answers4