Запуск всплывающего окна с неверным вводом с помощью jQuery - PullRequest
Новая
       10

Запуск всплывающего окна с неверным вводом с помощью jQuery

0 голосов
/ 14 февраля 2019

У меня успешно проверено, является ли ввод действительным или недействительным (пусто или нет в моем случае [пожалуйста, игнорируйте susbtring(), я должен использовать это из-за определенного требования]). Однако Я хочу вручную вызвать всплывающее окно по умолчанию Input field is not valid, когда вы ничего не вводите в <input> и отправляете форму.

Я хотел бы сделать выше, потому что целевой ввод, который я хочу проверить действительным или недействительным, находится в скрытой «вкладке».Если возможно, я не хочу обходного решения.Можно ли вызвать это всплывающее окно вручную?

Я проверил, является ли целевой ввод действительным или нет, используя: 

trackedInput = $('#trackedInput');
confirmSubmit = $('#confirmSubmit');

confirmSubmit.click(function(e) {
    if (!trackedInput.val().substring(4)) {
        tabs.eq(0).trigger('click'); //tabs.eq(0) here selects the first div and 'click' it, causing it to be not_hidden and causing the current 'not_hidden' div to be hidden
        return false;
    }
}
<div class = "hidden">
  <input id = "trackedInput" type = "text" form = "confirm">
</div>

<div class = "hidden">
  //Some other stuffs here
</div>

<div class = "not_hidden">
  <input id = "confirmSubmit" type = "submit" form = "confirm">
</div>

<form id = "confirm"></form>

РЕДАКТИРОВАТЬ:

Под всплывающим окном по умолчанию я имел в виду следующее: the 'Пожалуйста, заполните этополе 'popup .

1 Ответ

0 голосов
/ 14 февраля 2019

Для этого вы можете использовать form.reportValidity().Он в основном проверяет форму и проверяет ее, а если обнаруживает недопустимое поле, запускает это всплывающее сообщение. 

trackedInput = $('#trackedInput');
confirmSubmit = $('#confirmSubmit');
yourForm = document.querySelector('#confirm');

confirmSubmit.click(function(e) {
  if (!trackedInput.val().substring(4)) {
    yourForm.reportValidity();
    return false;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden">
  <input id="trackedInput" type="text" form="confirm" required>
</div>

<div class="hidden">
  //Some other stuffs here
</div>

<div class="not_hidden">
  <input id="confirmSubmit" type="submit" form="confirm" required>
</div>

<form id="confirm"></form>
...