Как показать подсказку. js после неудачной проверки формы - PullRequest
Новая
       16

Как показать подсказку. js после неудачной проверки формы

1 голос
/ 30 апреля 2020

Я бы хотел, чтобы всплывающая подсказка отображалась, если проверка ввода формы не удалась (в приведенном ниже примере что-либо <0). Я попытался сделать это с помощью триггера «focus», но проблема в том, что он также появляется, как только пользователь фокусирует форму, чтобы сделать какой-либо ввод. То же самое касается триггера «щелчка». </p>

Любое другое решение для этого?

Это сопутствующая документация:

Типпи. js document / triggers 

$( document ).ready(function() {

    // Floating Balance Form
    $("#formInputFloatingBalance").attr({
        min: 0,
        step: 0.01,
        required: true,
        autofocus: true,
    });
});

// Create new tippy, trigger in this case is "focusin"

new tippy("#formInputFloatingBalance", {
    content: "Please enter a balance greater than 0",
    theme: "CFD",
    inertia: true,
    animation: "scale",
    placement: "bottom",
    trigger: "focusin",
    duration: [100, 0],
});

// Validate form input and show tippy in case of failed validation

var validBalance = $("#formInputFloatingBalance")[0].checkValidity();
if (validBalance == false) {
      $("#formInputFloatingBalance").focus();
}
#formInputFloatingBalance {
font-family: 'Varela Round', sans-serif;
    font-size: 1vw;
    color: #22225B;
    width: 15%;
    height: 8vh;
    border-radius: 6px;
    border-width: 2px;
    border-color: #8892b7;
    text-align: center;
    cursor: crosshair;
    font-weight: bold;
}

.formMain input::placeholder {
  color: rgba(110, 125, 156, 0.47);
  font-size: 0.9em;
  font-style: italic;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
 
<div class="balanceContainer">
      <input type="number" id="formInputFloatingBalance" class="formInputTopRow">
</div>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>                        

  </body>
</html>

1 Ответ

1 голос
/ 30 апреля 2020

Просто создайте всплывающие подсказки после выполнения проверок: 

const balanceInput = document.querySelector('#formInputFloatingBalance');
const validationButton = document.querySelector('#validationButton');

validationButton.onclick = () => {
  const balance = parseInt(balanceInput.value, 10);

  // Make sure you delete any previous Tippy or you will end up with
  // a bunch of them on the same element:
  
  // See https://github.com/atomiks/tippyjs/issues/473.
  
  Array.from(document.querySelectorAll('input')).forEach(node => {  
    if (node._tippy) node._tippy.destroy();
  });
  
  // Valiadte and create Tippy if needed:

  if (isNaN(balance) || balance < 0) {
    new tippy("#formInputFloatingBalance", {
      content: "Please enter a balance greater than 0",
      theme: "CFD",
      inertia: true,
      animation: "scale",
      placement: "bottom",
      trigger: "focusin",
      duration: [100, 0],
    });

    balanceInput.focus();
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>                        
 
<div class="balanceContainer">
  <input type="number" id="formInputFloatingBalance" />
  
  <button id="validationButton">Validate</button>
</div>
...