21

submitHTML5検証ステップの前にフォームのアクションをキャッチする方法はありますか？

これは私が試したことです：

HTML

<form method='post' >
    <fieldset>
        <input type='email' name='foo' required />
        <input type='submit' />
    </fieldset>
</form>

jQuery

$('form').submit(function() {
    $('fieldset').addStyle('error');
    return false;
})

ただし、これsubmitはHTML5検証に合格した場合にのみトリガーされます。

4

4 に答える 4

9

いいえ、HTML5検証は、すべてのブラウザで送信イベントの前に行われるため、ボタンをクリックするなど、イベントタイプを変更する以外は不可能です。

$('input[type="submit"]').on('click', function() {
    $('fieldset').addClass('error');
});

フィドル

于 2013-02-28T14:48:14.667 に答える
7

jqueryを使用して、ページが最初に読み込まれるときにフォームの検証を無効にして、onsubmitハンドラーが実行される前に検証が行われないようにします。

$(document).ready(function(){
   $('form').attr('novalidate','novalidate');
})

次に、関数の最後で、onsubmitjavascriptを介して各フィールドでHTML5検証を手動で実行します（を使用checkValidity()）

于 2013-02-28T14:49:32.717 に答える
0

ボタンをから変更します

<input type='submit' />

通常のボタンに

<input type='button' id="submit" />

その後、クリックイベントをキャプチャして、自分で送信します

$('#submit').on('click', function() {
    $('fieldset').addStyle('error');

    // if everything is ok
    $('form').submit(); 
})
于 2013-02-28T14:55:04.467 に答える
0

"invalid"その要素のイベントをインターセプトし、クラスを適用してreturn falseからキャンセルすることができます

https://developer.mozilla.org/en-US/docs/Web/Events/invalid

また、クラスを削除するためにフォーカスとキーダウンイベントを追加しました。

$('form').submit(function() {
    $('fieldset').addStyle('error');
    return false;
})
$('input').on("invalid", function(e){
   //Code: Action (like ajax...)
   $(e.target).addClass("error");
   return false;
});
$('input').on("focus", function(e){
   //Code: Action (like ajax...)
   $(e.target).removeClass("error");
});
$('input').on("keydown", function(e){
   //Code: Action (like ajax...)
   $(e.target).removeClass("error");
});
.error {
    border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' >
    <fieldset>
        <input type='email' name='foo' required />
        <input type='submit' />
    </fieldset>
</form>

と同じ制限がある場合があることに注意してくださいHTMLFormElement.reportValidity()

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity

于 2018-06-26T22:34:46.030 に答える