37

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

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

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

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

4

9 に答える 9

12

このリンクで答えを見つけることができます: How to force a html5 form validation without submit it via jQuery

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

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

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

document.getElementById("email").setCustomValidity("This email is already registered!");
document.getElementById("submitbutton").click()
于 2012-12-13T18:22:59.740 に答える
4

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

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

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

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

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

このようにして、利用可能なユーザー名をチェックしたり、HTTP リクエストを介して任意の値を照合したりするなど、フォームのツールチップを使用できます。

于 2014-07-03T11:14:53.820 に答える
3

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

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

したがって、基本的にchangeは、入力フィールドのイベントを使用して、変更ごとに ajax 呼び出しを行う必要があります。または、送信ボタンを削除しclickて通常のボタンのイベントを使用し、ajax 呼び出しで一意の電子メールを確認してから、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();
    });
});
于 2015-06-15T09:43:35.580 に答える
1

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

上記のリンクでは、彼は「入力」タイプが数値であり、入力時に検証関数を呼び出しました。これがあなたが探しているものであることを私に知らせてください。

<input type="number" required="true" value="50" min="18" max="60" step="1" oninput="validate(this)">
于 2012-10-19T10:16:35.493 に答える
0

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

于 2013-01-15T08:12:35.670 に答える
0

setCustomValidity() は、パスワードの変更からのトリックを行い、パスワード入力を確認します。

しかし問題は、 setCustomValidity('Passwords do not match) を設定すると、フォーム送信イベントに関連付けられているためクリアされないことです。

パスワード確認入力キーアップイベントの空白に setCustomValidity('') を追加しました。

わたしにはできる。

 $(document).ready(function() {
            const confirm = document.querySelector('input[name=password2]');
            $('#pass2').on('keyup', function(){
                confirm.setCustomValidity('');
            })
            $("#reset-pw-form").on('submit', function(e) {
                e.preventDefault();
                if($('#pass1').val() != $('#pass2').val())  {
                    confirm.setCustomValidity('Passwords do not match');
                    confirm.reportValidity();
                    return false;
                }

}

于 2021-09-07T10:29:20.527 に答える