web-dev-qa-db-ja.com

送信イベントなしでsetCustomValidityメッセージ/ツールチップを表示する方法

私はフォームの基本的な検証を使用して、電子メールが正しい形式であるかどうかを確認し、データがAjaxによって送信され、そこで電子メールアドレスが既に使用されているかどうかを確認し、ユーザーが国/州を選択したか、選択ボックスにデフォルト値を残しました。

ただし、HTML5フォームの検証を行うには、基本的なフォームの検証Ajax操作が実行される場合に送信をクリックすると、イベントが必要になりますが、結果が出たら、インターフェイスの一貫性のために同じブラウザーツールチップを使用します彼らがどのように見えるかなど）。

だから、それらを表示する方法はありますか？私は彼らのために特別なイベントがあるかどうかを見つけることができませんでした。現在、フィールドには赤いエッジのみが表示され、その上にマウスを置くとエラーメッセージが表示されますが、送信ボタンをもう一度クリックするとツールチップが表示されます。

また、ネイティブのツールチップを持たないブラウザー（私の場合はSafari）では、Webshims Libを使用していますが、ChromeおよびFirefoxとまったく同じように動作します。

javascriptformshtml5validationtooltip
24
Alexxandar

.checkValidity()でうまくいくと思いましたが、UIをトリガーしません。

.reportValidity()はあなたが望むことをするように思えます。 http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-reportvalidity

ブラウザーがまだそれを実装しているかどうかはわかりません：/

37
Ben Boyle

このリンクで答えを見つけることができます： jQuery経由で送信せずにhtml5フォーム検証を強制する方法

基本的に、送信ボタンを見つけて、それをクリックして呼び出します：

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

また、メールアドレスが使用中かどうかを確認した後に検証メッセージを変更し、上記のようにフォームの検証を強制することもできます。

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

実際には非常に簡単です-非表示の入力要素をフォームに追加します。

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

カスタムツールチップを作成する入力要素でmyInputField.setCustomValidity(message)を呼び出してから、form.click();を呼び出します

フォームの有効性プロセスが実行され、その要素上にメッセージポップアップが表示されますが、非表示の要素のためフォームは送信されないため、送信イベントをキャッチしてキャンセルする必要はありません。

完了し、本当に準備ができたら、非表示の要素に値を設定すると、フォームが正常に送信されます。

この方法では、利用可能なユーザー名の確認や、HTTPリクエストなどで値を照合するなどの目的でフォームツールチップを使用できます。

4
Neil

HTMLFormElement.reportValidity()のポリフィル。
IE11およびEdgeでテスト済み。ただし、IE11で下のStackOverflowサンドボックスを実行すると、検証メッセージは表示されません。

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>
2
Christian d'Heureuse

このリンクをチェックアウトします（ HTML 5ページでsetCustomValidityを使用してカスタム検証メッセージを提供します ）。

上記のリンクでは、「入力」タイプは数値であり、入力は検証関数と呼ばれていました。これがあなたが探しているものであることを教えてください。

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

これはニースのライブ例です カスタムがフォーム入力に関するフィードバックを検証/提供します。

基本的なJavaScriptは次のようになります。

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

    if (passcode_input.value != "Ivy") {
        passcode_input.setCustomValidity("Wrong. It's '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>
1
zelusp

ほとんどの人が言うように、input.setCustomValidity("message")を使用する必要があります。

ここでの問題は、submitイベント内でその検証をチェックできないことです。これは、ajax呼び出しを行い、setCustomValidityを非同期に設定する必要があるためです。

したがって、基本的には、入力フィールドのchangeイベントを使用し、変更ごとにajax呼び出しを行う必要があります。または、送信ボタンを削除して、通常のボタンのclickイベントを使用し、ajax呼び出しで一意のメールを確認してから、javascriptを介してsubmitを呼び出します。

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();
    });
});
1
Ma Jerez

条件がfalseの場合、要素に対してsetCustomValidityを使用できます（keypressやclickなどのイベントハンドラー内で実行できます）。入力が有効でない場合は、送信してください。これにより、ブラウザのメッセージツールチップがトリガーされます。

0
Ivan Ivković