时间戳

首页 > 解决方案 > 使用自定义 CSS 抛出我自己的验证消息 | 网址验证

javascript - 使用自定义 CSS 抛出我自己的验证消息 | 网址验证

问题描述

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

我之所以要经历这个，而不仅仅是简单地使用type=url，因为我不喜欢标准的 chrome 验证错误消息，我想把我自己的放在我的表单下面。

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

function onInvalid(ev) {
  ev.preventDefault();
  document.getElementById('errorMessage').innerText = "Yikes! That's not a valid URL";
}
#errorMessage {
  display: none;
  color: #EB7051;
  font-size: 15px;
}
<form method="POST" id="Submit">
  <div class="inner-form">
    <div class="input-field first-wrap">
      <div class="svg-wrapper">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <path
                        d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z "
                    ></path>
                </svg>
      </div>
      <input id="search" name="url" placeholder="Paste a domain here" type="url" required oninvalid="onInvalid(event)" />
    </div>

    <div class="input-field second-wrap">
      <button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit">
                SEARCH
            </button>
    </div>
  </div>
  <p class="errorMessage" id="errorMessage">Yikes! That's not a valid URL.</p>
</form>

会不会是因为display: none？我只希望它在无效 url（不包含 http:// 或 https://）时显示，然后在提交有效 url 时消失

编辑所需结果：

在此处输入图像描述

标签： javascripthtml

解决方案

是的。display: none是罪魁祸首。为了在提交有效 url 时隐藏错误消息，您只需在输入有效时将其设置innterText为空字符串 ( )。''

这是我的解决方案：https ://jsfiddle.net/mqvynw3L/

<html>
    <head>
        <style>
            #errorMessage {
                color: #EB7051;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <form method="POST" id="Submit">
            <div class="inner-form">
              <div class="input-field first-wrap">
                <div class="svg-wrapper">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                              <path
                                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z "
                              ></path>
                          </svg>
                </div>
                <input id="search" name="url" placeholder="Paste a domain here" type="url" required oninvalid="onInvalid(event)" />
              </div>
          
              <div class="input-field second-wrap">
                <button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit">
                    SEARCH
                </button>
              </div>
            </div>
            <p class="errorMessage" id="errorMessage"></p>
          </form>
    </body>
    <script>
        function runValidation() {
            const inputEl = document.getElementById('search');
            const errorEl = document.getElementById('errorMessage');

            console.log('Validating the input value >>>', inputEl.value);

            if (inputEl && typeof inputEl.checkValidity === 'function') {
                const isValid = inputEl.checkValidity();
                console.log('IsValid >>>', isValid);
                errorEl.innerText = !isValid ? "Yikes! That's not a valid URL" : '';
                return false;
            }

            return true;
        }

        function searchIt(ev) {
            if (runValidation()) {
                console.log('Search it .>>');
            }
        }

        function onInvalid(ev) {
            ev.preventDefault();
        }
    </script>
</html>

因为，oninvalid也只在提交期间运行，所以最好创建您自己的验证（我正在使用浏览器的本机验证器checkValidity），并且只有在输入有效时才执行您的提交操作（例如：调用 API）。这样您就可以更好地控制逻辑，如果您决定在输入更改时运行验证，您只需调用事件runValidation函数即可onkeypress。

推荐阅读