首页 > 解决方案 > HTML5 required 验证器不适用于 type="submit" 输入

问题描述

所需的验证器不适用于 type="sumbit" 输入。我正在用 Javascript 制作一个应用程序,其中输入的 webname 和 url 名称被放入并提交,但所需的验证器不起作用并且在包含元素内没有添加任何文本。请有人检查代码并回复问题所在。这是html。

<!DOCTYPE html>
    <html>
    <head>
        <title>linklist 2</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
        @-webkit-viewport { width: device-width; }
        @-moz-viewport { width: device-width; }
        @-ms-viewport { width: device-width; }
        @-o-viewport { width: device-width; }
        @viewport { width: device-width; }
    </style>
    <script>
    // Important for windows phone 8
    if (navigator.userAgent.match(/IEMobile\/10\.0/))
    {
        var msViewportStyle = document.createElement("style");
        msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
        document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
    }
    </script>
    </head>
    <body>
        <div id="mainbody">
            <div id="image-container">
                <!-- here will come the image-->
            </div>
            <div id="name-div">
                <input type="text" name="username" placeholder="Name" id="username">
            </div>
            <div id="list-div">
                <a href="https://www.youtube.com"><li class="links"><span>youtube</span></li></a>
                <a href="https://www.youtube.com"><li class="links"><span>youtube</span></li></a>
                <a href="https://www.youtube.com"><li class="links"><span>youtube</span></li></a>
                <a href="https://www.youtube.com"><li class="links"><span>youtube</span></li></a>
                <a href="https://www.youtube.com"><li class="links"><span>youtube</span></li></a>
                <a href="https://www.youtube.com"><li class="links"><span>youtube</span></li></a>
            </div>
            <button id="newlinks">new link</button>
            <div id="theme-div">
                <a href="./images"><button id="theme">Themes</button></a>
            </div>
            <div id="form-div">
                <form id="form-space">
                    <input type="text" name="webname" id="webname" maxlength="80" placeholder="Name of the web" 
                    required/>
                    <input type="text" name="url" id="addurl" maxlength="80" placeholder="url" required />
                    <input type="submit" name="addlink" value="ADD LINK" id="addlink"/>
                </form>
            </div>
        </div>
        <script src="jquery-3.6.0.js"></script>
        <script src="script.js"></script>
    </body>
</html>

标签: javascripthtml

解决方案


推荐阅读