Как мне удалить это предложение

#html

#HTML

Вопрос:

 <body>
<form>
             <div>
                    <label for="email" style="margin-right:72%;">Email address</label>
                    <input type="text" name="email" id="email" placeholder="Email" pattern="[a-z0-9._% -] @[a-z0-9.-] .[a-z]{2,}$" title="Please enter a valid email address" required>
             </div>
            <button>Send</button>
</form>
</body>

Как я могу удалить предложение с выводимым сообщением об ошибке «вы должны использовать этот формат«?

https://i.stack.imgur.com/5IAVC.png

1. Какова ваша цель? Опишите это лучше, пожалуйста.

2. я хочу, чтобы на выходе отображалось только сообщение об ошибке ** Пожалуйста, введите действительный адрес электронной почты ** но первое предложение раздражает

3. Насколько я вижу, вы используете какую-то библиотеку для достижения этого?

4. Используете ли вы Internet Explorer? Из документов Microsoft здесь всплывающая подсказка находится в том же формате.

5. Смотрите ответ @FluffyKitten.

Ответ №1:

То, что вы видите, является сообщением о проверке HTML5 по умолчанию. Вы можете использовать стандартную setCustomValidity() функцию (которая доступна по умолчанию как часть HTMLSelectElement ), чтобы изменить это — нет необходимости в библиотеках или даже javascript, он доступен в большинстве основных браузеров по умолчанию.

Ссылка: Документы Mozilla MDN для setCustomValidity

Эта функция принимает строку, на которую вы хотите заменить строку по умолчанию. В вашем случае вы хотите, чтобы оно отображалось, когда входные данные недопустимы, поэтому вы можете добавить его в oninvalid атрибут, например

 oninvalid="this.setCustomValidity('Please enter a valid email address')"

К вашему сведению, для ввода электронной почты есть ** type="email"** , что избавляет вас от необходимости указывать шаблон для допустимого ввода.

  <input type="email" name="email" id="email" placeholder="Email" 
             oninvalid="this.setCustomValidity('Please enter a valid email address')" 
             required>

Рабочий пример:

 <body>
  <form>
    <div>

      <!-- YOUR TEXT INPUT -->
      <label for="email" style="margin-right:72%;">Email address</label>
      <input type="text" name="email" id="email" placeholder="Email" 
             pattern="[a-z0-9._% -] @[a-z0-9.-] .[a-z]{2,}$" 
             title="Please enter a valid email address"  
             oninvalid="this.setCustomValidity('Please enter a valid email address')" 
             required>


     <!-- SAME MESSAGE ON EMAIL INPUT -->       
     <input type="email" name="email2" id="email2" placeholder="Email2" 
             oninvalid="this.setCustomValidity('Please enter a valid email address')" 
             required>
        </div>
    <button>Send</button>
  </form>
</body>

Ответ №2:

просто удалите

 pattern="[a-z0-9._% -] @[a-z0-9.-] .[a-z]{2,}$" title="Please enter a valid email address"

из ввода тега