javascript - 输入值未定义的javascript

标签 javascript css dom browser

<分区>

我想在提交时文本框为空时显示一条错误消息,但它不起作用,每次我尝试通过控制台区域获取值时都返回未定义。

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 || 作为条件的选项时,即使我在文本区域中写了一些东西,消息也会每次都可见。

最佳答案

它是 getElementsByName,因此您正在获取 DOM 元素 的列表,您需要从列表中选择特定的元素。

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>

关于javascript - 输入值未定义的javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30788950/

相关文章:

javascript - 有没有办法在离线时使用 JavaScript 文件? (HTML/JADE/JS/离线)

javascript - jQuery when().done() 在多个对象上

JavaFX:设置 ProgressIndicator 文本标签的颜色

php - 简单的 html dom 抓取大型 html 文件

javascript - Svelte 读取嵌套存储

javascript - Jquery 数据表复选框

CSS div 圆 Angular

html - 以移动设备为中心的 Div

javascript - Android 原生浏览器中的 dom 处理时间太长

javascript - 使用 Javascript 更改 CSS 值