Выдача моего собственного сообщения проверки с помощью пользовательской проверки CSS

ProgramBox

Выдача моего собственного сообщения проверки с помощью пользовательской проверки CSS | URL

Post author:admin
Запись опубликована:11 декабря, 2022
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь отобразить сообщение об ошибке в своей HTML-форме при отправке не URL-адреса, поскольку мне нужно иметь возможность легко настраивать положение и применять стиль 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-адреса

Редактирование желаемого результата:

Ответ №1:

Да. 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 amp;amp; 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 события.

1. Спасибо… он работает на вашем, но не на моем. Не могли бы вы просмотреть его? Не похоже, что я что-то пропустил… codepen.io/SteveyUSA/pen/jOVqBWL

2. У вас есть 2 searchIt функции. Более поздний перезаписывает сообщение из моего ответа. Вот почему это не работает

3. Я удалил второе и интегрировал оставшийся код в первое, однако не повезло, в итоге я снова получил проверку Chrome. Если бы вы могли помочь здесь, это было бы потрясающе. Извините за хлопоты…..

4. Я предполагаю, что вы также удалили onInvalid функцию из моего ответа. Эта ev.preventDefault() функция — это то, что предотвращает отображение этой проверки Chrome. Не могли бы вы предоставить свой окончательный фрагмент кода?

5. Нет, я его не снимал…. Я просто не обновил codepen.