Javascript验证-错误消息只闪烁一秒钟

Javascript validation - Error message only flashes for a second

本文关键字：闪烁 一秒钟 消息 错误 验证 Javascript      更新时间：2023-09-26

我有这个简单的HTML项目，它验证一个空文本和单选按钮字段。如果其中一个字段为空，则显示错误，但错误消息仅在屏幕上闪烁一秒钟，然后再次消失。为什么会发生这种情况?

这是我的HTML代码

<form id="food_form">
<p>
    <label>Your Name:
        <input type="text" id="user_name" name="user_name">
    </label>
    <span id="error_user_name" class="error"></span>
</p>
<p>
    Favorite Food?
    <span id="error_radiobutton" class="error"></span><br>
    <label><input type="radio" name="radiobutton" value="pizza">Pizza</label><br>
    <label><input type="radio" name="radiobutton" value="burger">Burger</label><br>
    <label><input type="radio" name="radiobutton" value="spaghetti">Spaghetti</label><br>
</p>
    <input type="submit" value="Submit">

然后是Javascript代码 
<script>
document.getElementById("food_form").onsubmit = validateForm;
function validateForm() {
    var validName = validateTextBox("user_name", "error_user_name"),
        validRadiobutton = validateRadioButton();
}
function validateTextBox(fieldId, errorId) {
    var text = document.getElementById(fieldId).value,
        errorSpan = document.getElementById(errorId);
    if (text === "") {
        errorSpan.innerHTML = "* please input your name";
    }

}
function validateRadioButton() {
    var radiobutton = document.getElementById("food_form").radiobutton,
        errorSpan = document.getElementById("error_radiobutton"),
        isChecked = false,
        i;
    errorSpan.innerHTML = "";
    for (i = 0; i < radiobutton.length; i++) {
        if (radiobutton[i].checked) {
            isChecked = true;
            break;
        }
    }
    if (!isChecked) {
        errorSpan.innerHTML = "* You must pick something.";
    }
}

感谢您的回复。

您的函数validateForm设置错误消息，但随后您调用validateRadioButton()，再次设置errorSpan.innerHTML = "";。这就是"flash"

的原因

您正在验证表单，但是如果在submit事件上验证失败，则需要执行return false。试试这个

function validateForm() {
    var isTextBoxValid = validateTextBox("user_name", "error_user_name"),
        isRadioButtonValid = validateRadioButton();
    return isTextBoxValid || isRadioButtonValid;
}
function validateTextBox(fieldId, errorId) {
    var text = document.getElementById(fieldId).value,
        errorSpan = document.getElementById(errorId),
        isValid = true;
    if (text === "") {
        errorSpan.innerHTML = "* please input your name";
        isValid = false;
    }
    return isValid;
}
function validateRadioButton() {
    var radiobutton = document.getElementById("food_form").radiobutton,
        errorSpan = document.getElementById("error_radiobutton"),
        isChecked = false, i,
        errorSpan.innerHTML = "";
    for (i = 0; i < radiobutton.length; i++) {
        if (radiobutton[i].checked) {
            isChecked = true;
            break;
        }
    }
    if (!isChecked) {
        errorSpan.innerHTML = "* You must pick something.";
    }
    return isChecked;
}

在上面的代码中，我们为每个函数返回Boolean值(true/false)，如果其中一个是true，我们就提交表单

尝试将提交按钮放在表单元素的外部。

我一直有同样的问题，这只是为我工作。

相关文章：