Как показать сообщение /tooltip setCustomValidity без отправки события

Ответ 1

Я думал, что .checkValidity() выполнит трюк, но он не вызывает пользовательский интерфейс.

Похоже, что .reportValidity() собирается делать то, что вы хотите. http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-reportvalidity

Я не знаю, реализуют ли какие-либо браузеры хотя это:/

Ответ 2

Вы можете найти ответ по этой ссылке: Как заставить проверку формы html5 без отправки ее через jQuery

В принципе, вы найдете кнопку отправки и нажимаете на нее:

// force form validation
document.getElementById("submitbutton").click()

Вы также можете изменить сообщение проверки после проверки того, используется ли адрес электронной почты или нет, а затем принудительно выполнить проверку формы, как указано выше:

document.getElementById("email").setCustomValidity("This email is already registered!");
document.getElementById("submitbutton").click()

Ответ 3

На самом деле это очень просто - добавьте скрытый элемент ввода в вашу форму:

<input type="hidden" id="myFormCheck" required="true" value=""/>

Вызовите myInputField.setCustomValidity(message) на элементе ввода, который вы хотите создать пользовательскую всплывающую подсказку, затем вызовите form.click();

Процесс проверки формы запускается и отображает всплывающее сообщение по этому элементу, но форма не будет отправляться из-за скрытого элемента, поэтому вам не нужно будет ловить и отменить событие отправки.

Когда вы закончите и действительно готовы к работе, установите значение для скрытого элемента и форма будет отправлена ​​нормально.

Таким образом вы можете использовать всплывающую подсказку формы для чего-то вроде проверки доступных имен пользователей или сопоставления любых значений по HTTP-запросу и т.д.

Ответ 4

Оформить эту ссылку (Предоставить пользовательские сообщения проверки, используя setCustomValidity в HTML 5 страницах).

В приведенной выше ссылке он использовал тип "input" - номер и oninput, который он назвал функцией проверки. Позвольте мне знать, это то, что вы ищете.

<input type="number" required="true" value="50" min="18" max="60" step="1" oninput="validate(this)">

Ответ 5

Как говорят большинство людей, вы должны использовать input.setCustomValidity("message").

Проблема заключается в том, что вы не можете проверить эту проверку в событии submit, так как вам нужно выполнить вызов ajax, а затем установить setCustomValidity асинхронно.

Итак, в основном вы должны использовать событие change для поля ввода и делать вызов ajax при каждом изменении. Или удалите кнопку отправки и используйте событие click обычной кнопки, проверьте уникальное письмо в вызове ajax, а затем вызовите submit через javascript.

См. пример последней опции с помощью jQuery:

<form action="/sign-in" id="form">
    <input type="email" id="email" required/>
    <button id="submit">Submit</button>
</form>

// we capture the click instead the submit
$("#submit").on("click",function(){
    var $elem = $("#email");
    var email = $elem.val();

    //the ajax call returns true if the email exists
    $.get( "ajax/checkUniqueEmail", function(data) {
        if(data === "true"){
            $elem.setCustomValidity("This email already exists.");
        }else{
            $elem.setCustomValidity("")
        }
        //then we submit the form
        $("#form").submit();
    });
});

Ответ 6

Вы можете использовать setCustomValidity для элемента, если условие ложно (вы можете сделать это внутри любого обработчика события, такого как нажатие или клик). Если вход НЕ является допустимым, введите команду SUBMIT. Это вызовет подсказку с сообщением о браузере.

Ответ 7

Вот хороший живой пример, который пользовательский проверяет/дает обратную связь на входе формы.

Основной javascript выглядит так:

function checkPasscode() {
    var passcode_input = document.querySelector("#passcode");

    if (passcode_input.value != "Ivy") {
        passcode_input.setCustomValidity("Wrong. It 'Ivy'.");
    } else {
        passcode_input.setCustomValidity(""); // be sure to leave this empty!
        alert("Correct!");
    }
}

HTML:

<form>
    <label for="passcode">Enter Passcode:</label>
    <input id="passcode" 
           type="password" 
           placeholder="Your passcode" 
           oninput="checkPasscode();"
           required/>
    <button type="submit">Submit</button>
</form>

Ответ 8

A polyfill для HTMLFormElement.reportValidity().
Протестировано с помощью IE11 и Edge. Но при запуске в песочнице StackOverflow ниже с IE11 сообщения проверки не отображаются.

function reportValidityPolyfill() {
  const button = createInvisibleSubmitButton();
  this.appendChild(button);
  this.addEventListener("submit", submitEventHandler);
  var isValid = false;
  button.click();
  this.removeEventListener("submit", submitEventHandler);
  this.removeChild(button);
  return isValid;

  function createInvisibleSubmitButton() {
    const button = document.createElement("button");
    button.type = "submit";
    button.style.display = "none";
    return button;
  }

  function submitEventHandler(event) {
    event.preventDefault();
    isValid = true;
  }
}

if (!HTMLFormElement.prototype.reportValidity) {
  HTMLFormElement.prototype.reportValidity = reportValidityPolyfill;
  console.log("ReportValidity polyfill installed.");
} else {
  console.log("ReportValidity polyfill skipped.");
}

input {
  outline: 1px solid #0f0;
}

input:invalid {
  outline: 1px solid #f00;
}

<form id="form1">
  Enter a number from 1 to 5: <input type="number" min="1" max="5" required>
</form>
<br>
<div onclick="console.log('Validity: ' + document.getElementById('form1').reportValidity())">
  Click here to call reportValidity()
</div>