HTML 输入表单错误消息闪烁

所以我创建了这个非常简单的年龄门，当用户小于 18 岁时，他们会在"验证年龄"按钮底部收到一条错误消息"重试"。一切正常，但是当"重试"消息显示它只是闪烁，显示一秒钟并消失时。我希望它保持可见，直到用户单击其中一个输入框。我做错了什么？如果在年份输入框中输入 2010，则可以看到"重试"消息闪烁。

<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <style>
    body{
        width: 100%;
        padding: 0;
        margin: 0;
    }
    #ageGateWrapper{
        background: rgba(0,0,0,0.75);
        text-align: center;
        width: 512px;
        height: 288px;
        border: 2px solid #d5882c;
    }
    #innerWrapper{
        position: relative;
        top: 10%;
    }
    h1{
        position: relative;
        font-size: 24px;
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        color: #ffffff;
        padding-bottom: 10px;
        letter-spacing: 5px;
    }

    #ageGateWrapper ul{
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }
    #ageGateWrapper ul li{
        display: inline-block;
    }
    input {
         padding: 10px;
         width: 100%;
         font-size: 16px;
         font-family: 'Oswald', sans-serif;
         font-weight: 400;
         letter-spacing: 2px;
         color: #ffffff;
         border: 2px solid #d5882c;
         background-color: #000000;
         width: 80px;
         height: 50px;
         text-align: center;
         margin-right: 10px;
    }
    #submit {
        position: relative;
        top: 15px;
        text-align: center; 
        margin: 0 auto;
        color: #ffffff;
        font-size: 16;
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        letter-spacing: 2px;
        width: 135px;
        height: 60px;
        margin: 0;
        padding: 0;
        background: #000000;
        border: 2px solid #d5882c;
    }

    #errorDiv{
        position: relative;
        display: none;
        top:25px;
        font-size: 16;
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        color: #ffffff;
    }
</style>
<script language="javascript">
function age(){
    var validated = false;
    var minimumAge = 18;
    var minYear;
    var bday=parseInt(document.forms[0].txtBday.value);
    var bmo=(parseInt(document.forms[0].txtBmo.value)+1);
    var byr=parseInt(document.forms[0].txtByr.value);
    //var byr;
    var age;
    var now = new Date();
    currentDay=now.getDate();
    currentMo=(now.getMonth()+1);
    currentYr=(now.getFullYear());
    console.log("tday " + currentDay);
    console.log("tmo " + currentMo);
    console.log("tyr " + currentYr);
    minYear = currentYr - minimumAge;


    if(byr > minYear){
        failed();
    }

    if(byr >= minYear){
        if(bmo == currentMo){
            if(bday >= currentDay){
                //alert("PASS");
                passed();
            }
        }else if(bmo < currentMo){
            failed();
        }else if(bmo > currentMo){
                //alert("PASS 2");
                passed();
        }
    }
}

function passed(){
    alert("SHOW CONTENT");
    window.parent.postMessage("teaser ended", '*');
}
function failed(){
    document.getElementById("errorDiv").style.display= "block";
}
</script>
</head>
<body>
    <div id="ageGateWrapper">
        <div id="innerWrapper">
        <h1> ENTER YOUR DATE OF BIRTH</h1>
        <form>
        <ul>
            <li><div> <input type="text" name="txtBmo" placeholder="MM"> </div></li>
            <li><div> <input type="text" name="txtBday" size="4" placeholder="DD"> </div></li>
            <li><div> <input type="text" name="txtByr"size="4" placeholder="YYYY"> </div></li>
        <ul>    
            <input type="submit" value="VERIFY AGE" onClick="age()" id="submit">
            <div id="errorDiv">Try Again </di>
        <form>
        </div>  
    </div>      
</body>
</html>

您应该通过提供事件参数并对其应用 preventDefault() 方法来阻止表单提交：

.html

<input type="submit" value="VERIFY AGE" onClick="age(event)" id="submit">

JavaScript

function age(event){
    event.preventDefault();
    var validated = false;
...
}

"重试"闪烁，因为您已将"验证年龄"按钮设置为"提交"类型。每次单击"验证期限"时，浏览器都会将其解释为向服务器提交表单，导致服务器刷新并重置 DOM。将其更改为"按钮"通常可以解决此问题。

<form>
        <ul>
            <li><div> <input type="text" name="txtBmo" placeholder="MM"> </div></li>
            <li><div> <input type="text" name="txtBday" size="4" placeholder="DD"> </div></li>
            <li><div> <input type="text" name="txtByr"size="4" placeholder="YYYY"> </div></li>
        <ul>    
            <input type="button" value="VERIFY AGE" onClick="age()" id="submit">//BUTTON TYPE
            <div id="errorDiv">Try Again </di>
        <form>

尝试更正 HTML 代码中的错误。

1）关闭ul

2）关闭form

3）也纠正错误div的div关闭器。它目前是"

试一试。

相关内容

最新更新

热门标签：