问在用户将文本添加到输入字段后仍然显示内联错误消息。
EN

Stack Overflow用户

提问于 2022-05-11 11:48:44

回答 1查看 135关注 0票数 0

当用户单击submit时，我编写了一条错误消息，显示在每个使用DOM选择器丢失值的输入字段下。我还禁用了当点击提交时打开的电子邮件文件，使用preventDefault()。

但是，当用户键入文本区域时，消息不会消失。我试着用一个“按键”事件，但我无法让它工作。

HTML代码：

<body>
    <header class="header">

        <form action="mailto:me@fakeemail.com">
            <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代码：

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

回答 1

Stack Overflow用户

发布于 2022-05-11 14:22:27

若要查看处于当前状态的代码中的即时结果，请在检查输入值之前隐藏错误消息。

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();
    }       
});

话虽如此，以下是一些补充建议：

CSS用于元素的样式化(不是JavaScript)

Discourage内联JavaScript

Store DOM元素，而不是事件侦听器范围之外的内联DOM元素，因此您不必每次单击
时都查询DOM，考虑使用input上的required属性来快速赢得

的样式)。

所以..。

<!-- 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');
    }
});