Question

我希望在提交时文本框为空时显示错误消息，但是不起作用，每次我尝试通过控制台区域获取值都返回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：当我在条件中添加x == null ||时，即使我在textarea中写了一些内容，每次都会显示消息。

Answer 1

其getElementsByName因此您获得了DOM元素s的列表，您需要从列表中选择特定的列表。

＆＃13;

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

＆＃13;

 #error_alert {
        visibility: hidden;
        border: 1px solid #F00;
        text-align: center;
        width: 100px;
    }

    label,
    input,
    button {
        display: block;
        margin: 2px;
    }

＆＃13;

<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>

＆＃13;

Answer 2

getElementsByName()会返回一个数组，因此您与" "的比较无效。如果您在输入中添加ID也会更容易，那么您可以使用getElementById()代替。它返回一个值，然后您可以按原样进行比较。

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

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

Answer 3

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";
        }
    }
}

Answer 4

变化：

if (inputName.value == " ") {

要：

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

输入值未定义的javascript

4 个答案: