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

debugcn 发表于 Dev

白狼13

我有一个简单的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 = "";。那就是“闪光”的原因

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。