Javascript 错误消息未呈现| url验证_Javascript_Html

Javascript 错误消息未呈现| url验证

javascript html

Javascript 错误消息未呈现| url验证,javascript,html,Javascript,Html,当提交非url时，我试图在HTML表单中呈现错误消息，因为我需要能够轻松地调整位置并应用CSS样式我之所以要这样做，并不仅仅是使用type=url，因为我不喜欢标准的chrome验证错误消息，我想在我的表单下添加我自己的错误消息当前，提交非url时没有显示错误消息，并且我的控制台中也没有错误。有什么想法吗 HTML 搜寻哎呀！这不是一个有效的URL JS 功能onInvalid（ev）{ ev.preventDefault（）； document.getElementById（'err

当提交非url时，我试图在HTML表单中呈现错误消息，因为我需要能够轻松地调整位置并应用CSS样式

我之所以要这样做，并不仅仅是使用

type=url

，因为我不喜欢标准的chrome验证错误消息，我想在我的表单下添加我自己的错误消息

当前，提交非url时没有显示错误消息，并且我的控制台中也没有错误。有什么想法吗

HTML


搜寻
哎呀！这不是一个有效的URL

功能onInvalid（ev）{
ev.preventDefault（）；
document.getElementById（'errorMessage'）.innerText=“Yikes！那不是有效的URL”；
}

CSS

#错误消息{
显示：无；
颜色：#EB7051；
字体大小：15px；
}

可能是因为

显示：none

？我只希望它在一个无效的url（不包含http://或https://）时显示，然后在提交一个有效的url时消失

编辑所需结果：

除了我的评论之外，我还可以设置一个示例，允许显示放置在受影响输入后面的特定标记。如果您想修改标记中的消息，您可能希望将它与您已有的javascript合并请看下面

  <!DOCTYPE html>
<html>
<head>
<style>
.errorMessage {
   display: none;
   color: #EB7051;
   font-size: 15px;
}

input:focus:invalid + p {
    display:block;
}
</style>
</head>
<body>
    <form method="POST" id="Submit" >
        <div class="inner-form">
             <div class="input-field first-wrap">                    
                  <input id="search" name="url" placeholder="Paste a domain here" type="url" required />
                  <p class="errorMessage">Yikes! That's not a valid URL.</p>
             </div>
             <div class="input-field second-wrap">
                 <button id="button" class="btn-search" value="press" type="submit">SEARCH</button>
             </div>
        </div>
    </form>
</body>
</html>


.errorMessage{
显示：无；
颜色：#EB7051；
字体大小：15px；
}
输入：焦点：无效+p{
显示：块；
}
哎呀！这不是一个有效的URL
搜寻

上面的例子基于这里找到的想法

将“显示：无”更改为其他显示（如块）。这将使元素可见。还考虑将控制台放在代码中并跟踪精确执行。path@vvs但是它在整个过程中都是可见的，我只希望它在再次提交无效url时显示。有一种更简单的方法可以使用自定义有效性覆盖消息。请看一下这篇文章。在您的oninvalid函数中，您需要设置自定义有效性消息，而不是使用cssmay，因为我可能会导致一些不确定。这不是我想要改变的措辞，但我确实想要Chrome自己的验证错误消息。为了清晰起见，请看我添加的屏幕截图。谢谢。我的回答会有更多的想法，请检查一下。我已经能够使用一个自定义放在后面，并基于CSS伪选择器修改样式。