在用户将文本添加到输入字段之后，内联错误消息仍显示

发布于 2025-01-28 14:49:21 字数 2312 浏览 5 评论 0原文

当用户单击“提交”时，我已经编码了一个错误消息，以显示使用DOM选择器缺少值的每个输入字段。我还使用dextdefault（）禁用了单击提交时打开的电子邮件文件。

但是，当用户键入文本区域时，消息不会消失。我尝试使用“键盘”事件，但我无法正常工作。

HTML代码：

<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代码：

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伴我心暖 2025-02-04 14:49:21

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

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）
劝阻内联JavaScript
商店DOM元素在活动侦听器范围之外，因此您不必每次单击时都需要查询DOM，
请考虑使用<<<<代码>必需 Input s上的属性，以快速获胜，

因此...

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

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

回复收藏 0 原文

~没有更多了~