Оформление, аналогичное всплывающему окну, которое поставляется с обязательным атрибутом входного тега

#html #css

#HTML #css

Вопрос:

У меня есть форма на моем веб-сайте. Я использую required для некоторых полей, которое выдает всплывающее окно, когда поле не имеет значения при отправке. У меня есть поле с именем номер мобильного телефона, для которого я использовал javascript, чтобы проверить, является ли введенный номер действительным или нет. Если номер недействителен, я хочу показать аналогичное всплывающее окно, показанное required, с пользовательским сообщением («номер мобильного телефона недействителен»). Итак, как я могу его оформить или есть какой-либо доступный метод?

 <form action="." method="post" onsubmit="return validat()">
   <div class="form-group">
      <input class="form-control valid" name="conmobile" id="mobilenumber" type="tel" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your Mobile Number'" placeholder="Enter your Mobile Number" required>
   </div>
</form>

1. Стиль этих всплывающих окон зависит от браузера. Вы просто хотите, чтобы они были согласованными, или вы хотите скопировать определенный стиль?

2. Я хочу, похожий на тот, который поставляется с обязательным атрибутом

3. можете ли вы показать часть своего кода, который вы пробовали до сих пор, это будет легко для вас

4. Сделано в вопросе

5. «Я хочу такое, которое поставляется с обязательным атрибутом» — не отвечает на мой вопрос. Вы хотите, чтобы а) все всплывающие окна выглядели одинаково в Chrome и все всплывающие окна выглядели одинаково в Firefox, но вас не волнует, выглядят ли всплывающие окна одинаково в Chrome и Firefox; или б) Все всплывающие окна выглядели как стиль в [вставьте здесь название вашего любимого браузера]? И если b, то в каком конкретном браузере?

Ответ №1:

Пожалуйста, попробуйте это.

setCustomValidity() используется для изменения сообщения по умолчанию в обязательном поле ввода в форме.

событие oninput() добавляет пользовательское сообщение

  oninput="this.setCustomValidity('Enter atleast 10 digit.')"

событие oninvalid() добавляет пользовательское сообщение

  oninvalid="this.setCustomValidity('Mobile Number invalid..')"

 <form action="">
  <label for="phone">Mobile Number:</label>
  <input type="tel" id="mobile" name="phone" placeholder="1234567890" pattern="[0-9]{3}[0-9]{3}[0-9]{4}" oninvalid="this.setCustomValidity('Mobile Number invalid')"
    oninput="this.setCustomValidity('Enter atleast 10 digit.')"  required><br><br>
  <input type="submit" value="submit">
</form>

1. У меня уже есть js для проверки достоверности, так какие изменения мне нужно внести?

2. Iadd перед редактированием вопроса. хорошо, позвольте мне проверить сейчас

3. Также может ли атрибут pattern принимать выражение regex?