Question

所以我创建了这个非常简单的年龄门，当用户年龄小于18岁时，他们会收到一条错误消息＆＃34;再试一次＆＃34;在＆＃34;验证年龄＆＃34;的底部按钮。一切都正常，但是当＆＃34;再试一次＆＃34;消息显示它只闪烁，显示一秒钟然后消失。我想让它保持可见，直到用户点击其中一个输入框。我究竟做错了什么？如果您在年份输入框中键入2010，则可以看到＆＃34;再试一次＆＃34;消息闪烁。

<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>

Answer 1

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

<强> HTML

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

javascript

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

Answer 2

＆＃34;再试一次＆＃34;闪烁，因为你已经设置了'＃34;验证年龄＆＃34;按钮提交＆＃34;提交＆＃34;类型。每次单击“验证时间”时，浏览器会将其解释为向服务器提交表单，从而使其刷新并重置DOM。将其更改为＆＃34;按钮＆＃34;通常会解决这个问题。

<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>

Answer 3

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

1）关闭#ifndef EXAMPLE_HEADER_H #define EXAMPLE_HEADER_H #import "com/example/MyObject.h" #endif

2）关闭@UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { // Override point for customization after application launch. let example = ComExampleMyObject() return true }

3）纠正错误div的Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_ComExampleMyObject", referenced from: type metadata accessor for __ObjC.ComExampleMyObject in AppDelegate.o ld: symbol(s) not found for architecture x86_64 clang: error: linker command failed with exit code 1 (use -v to see invocation)更接近。它目前是`

试一试。

HTML输入表单错误消息闪烁

3 个答案: