Javascript 更改提交时的可见性-仅闪烁可见

我只是想在按下submit按钮时使用以下代码显示span标记：

<form onsubmit="checkName(this);">
    <ul>
        <li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li>
        ...
        <li><input type="submit"></li>
    </ul>
</form>

---

跨度最初设置为隐藏，并在提交时更改，但是标记仅在一瞬间出现，然后返回隐藏状态。关于为什么会这样做有什么建议吗？

此

表单已提交，这就是为什么您只会看到第二次

如果表单无效，您需要阻止提交-在属性
onsubmit
中添加
return

像这样：


函数checkName（表单）{
如果（form.username.value==“”）{
document.getElementById（“姓氏缺失”）.style.visibility=“可见”；
}
返回false；
}
#缺少姓氏{
可见性：隐藏；
}


姓氏
姓氏是必填字段
...


这是因为一旦单击“提交”，表单就会提交。要防止其提交，请使用此代码

<script>
    function checkName(form){
    if(form.username.value == ""){
        document.getElementById("surnameMissing").style.visibility = "visible";        
        return false;
    }
    return true;
    }
</script>
<form onsubmit="return checkName(this);">
<ul>
    <li>Surname<br><input type="text" name="username"><span style="visibility:hidden;" id="surnameMissing">Surname is a required field</span></li>
    ...
    <li><input type="submit"></li>
</ul>
</form>


函数检查名（表单）{
如果（form.username.value==“”）{
document.getElementById（“姓氏缺失”）.style.visibility=“可见”；
返回false；
}
返回true；
}

姓氏
姓氏是必填字段
...


通过添加
event.preventDefault（）防止表单提交在函数名下面。然后确保在
username.value==“”
返回false时提交表单

function checkName (form) {
    // prevent from submission
    event.preventDefault();

    if(form.username.value == "") {
        document.getElementById("surnameMissing").style.visibility = 'visible';
    } else {
        // Submit on successful validation
        form.submit();
    }
}

在表单的onsubmit属性中调用函数之前，还可以添加
event.preventDefault（）

<form onsubmit="event.preventDefault(); checkName(this);"> ... </form>

可以使用jQuery hide（）/show（）函数进行此操作$（姓氏不见了）躲起来谢谢！我不喜欢在函数运行时返回false：）我很高兴；）请给出答案，这样对其他人会有帮助。
<form onsubmit="event.preventDefault(); checkName(this);"> ... </form>

<form id="myForm">
    <ul>
        <li>Surname: <br><input type="text" name="username" id="username">
        <span id="surnameMissing">Surname is a required field</span></li>
        <li><input type="submit"></li>
    </ul>
</form>

var form = document.getElementById("myForm");
form.addEventListener('submit', function(e) {
    e.preventDefault();

    if(this.username.value == "") {
        document.getElementById("surnameMissing").style.visibility = 'visible';
    } else {
        this.submit();
    }
});

var inputUsername = document.getElementById("username");
inputUsername.addEventListener('keyup', function(e) {
    if(this.value == "") {
        document.getElementById("surnameMissing").style.visibility = 'visible';
    } else {
        document.getElementById("surnameMissing").style.visibility = 'hidden';
    }
});