HTML5フォーム検証のトリガー

いくつかの異なるフィールドセットを持つフォームがあります。フィールドセットを一度に1つずつユーザーに表示するJavascriptがあります。HTML5検証をサポートするブラウザーの場合、私はそれを利用したいと思います。しかし、私は自分の条件でそれを行う必要があります。私はJQueryを使用しています。

ユーザーがJSリンクをクリックして次のフィールドセットに移動すると、現在のフィールドセットで検証が行われ、問題が発生した場合にユーザーが先に進めないようにブロックする必要があります。

理想的には、ユーザーが要素にフォーカスを失うと、検証が発生します。

現在、novalidateにJavascriptを使用しています。ネイティブメソッドを使用したいと思います。:)

ネイティブの検証UIをトリガーすることはできませんが、任意の入力要素で検証APIを簡単に利用できます。

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

最初のイベントはcheckValidity、フォーカスを失うとすぐにすべての入力要素で発生します。要素がそうである場合invalid、対応するイベントが発生し、2番目のイベントハンドラーによってトラップされます。これは要素にフォーカスを戻しますが、それはかなり煩わしいかもしれません。エラーについて通知するためのより良い解決策があると思います。 上記の私のコードの実際の例を次に示します。

TL; DR：古いブラウザを気にしませんか？を使用しform.reportValidity()ます。

レガシーブラウザのサポートが必要ですか？読む。

実際に検証を手動でトリガーすることは可能です。

再利用性を向上させるために、答えにプレーンJavaScriptを使用します。jQueryは必要ありません。

次のHTMLフォームを想定します。

<form>
  <input required>
  <button type="button">Trigger validation</button>
</form>

そして、JavaScriptでUI要素を取得しましょう。

var form = document.querySelector('form')
var triggerButton = document.querySelector('button')

Internet Explorerなどのレガシーブラウザのサポートは必要ありませんか？これはあなたのです。

最新のブラウザはすべて、要素のメソッドをサポートしreportValidity()ていformます。

triggerButton.onclick = function () {
    form.reportValidity()
}

これで完了です。また、このアプローチを使用した簡単なCodePenもここにあります。

古いブラウザへのアプローチ

以下は、reportValidity()古いブラウザでどのようにエミュレートできるかについての詳細な説明です。

ただし、これらのコードブロックを自分でプロジェクトにコピーして貼り付ける必要はありません。ポニーフィルやポリフィルがすぐに利用できます。

reportValidity()がサポートされていない場合は、ブラウザーを少しトリックする必要があります。それで、私たちは何をしますか？

1. 呼び出してフォームの有効性を確認します form.checkValidity()ます。これにより、フォームが有効かどうかがわかりますが、検証UIは表示されません。
2. フォームが無効な場合、一時的な送信ボタンを作成し、クリックをトリガーします。フォームが無効であるため、実際には有効ではないことがわかります送信、ユーザーに検証のヒントが表示されます。一時的な送信ボタンはすぐに削除されるため、ユーザーには表示されません。
3. フォームが有効であれば、ユーザーに干渉してユーザーに処理を進める必要はまったくありません。

コードで：

triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    var tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

このコードは、ほとんどすべての一般的なブラウザーで機能します（IE11までテストを成功させました）。

これがCodePenの実際の例です。

ある程度、triggerHTML5フォーム検証を実行して、フォームを送信せずにユーザーにヒントを表示できます。

検証用と送信用の2つのボタン

設定するonclickグローバルフラグ（発言権を設定するための検証]ボタン上のリスナーをjustValidateこのクリックはフォームのバリデーションをチェックすることを意図していることを示すために）。

そしてonclick、送信ボタンのリスナーを設定して、justValidateフラグをfalse に設定します。

次にonsubmit、フォームのハンドラーでフラグjustValidateをチェックして戻り値を決定し、を呼び出しpreventDefault()てフォームの送信を停止します。ご存じのとおり、HTML5フォームの検証（およびユーザーへのGUIヒント）はonsubmitイベントの前に実行されます。フォームが有効であっても、falseを返すか、を呼び出すことでフォームの送信を停止できますpreventDefault()。

そして、HTML5では、フォームの検証をチェックするメソッドがあります。 form.checkValidity()があります。それから、コード内でフォームが検証されているかどうかを確認できます。

はい、ここにデモがあります：http : //jsbin.com/buvuku/2/edit

A List Apartで公開されたこの記事はそれを説明するのにかなり良い仕事をしているので、これを一から入力する価値があるかどうかはわかりません。MDNには、HTML5フォームと検証（APIと関連するCSSもカバー）の便利なガイドもあります。

フィールドセットへのHTML5検証の追加または削除はやや簡単です。

 $('form').each(function(){

    // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS
    $(this).find('.required').attr('required', false);

    // ADD THEM BACK TO THE CURRENT FIELDSET
    // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS
    $(this).find('fieldset.current .required').attr('required', true);

    $(this).submit(function(){

        var current     = $(this).find('fieldset.current')
        var next        = $(current).next()

        // MOVE THE CURRENT MARKER
        $(current).removeClass('current');
        $(next).addClass('current');

        // ADD THE REQUIRED TAGS TO THE NEXT PART
        // NO NEED TO REMOVE THE OLD ONES
        // SINCE THEY SHOULD BE FILLED OUT CORRECTLY
        $(next).find('.required').attr('required', true);

    });

});

私はトリックを見つけたようです：フォームtarget属性を削除し、送信ボタンを使用してフォームを検証してヒントを表示し、JavaScriptを介してフォームが有効かどうかを確認してから、何でも投稿します。次のコードは私のために働きます：

<form>
  <input name="foo" required>
  <button id="submit">Submit</button>
</form>

<script>
$('#submit').click( function(e){
  var isValid = true;
  $('form input').map(function() {
    isValid &= this.validity['valid'] ;
  }) ;
  if (isValid) {
    console.log('valid!');
    // post something..
  } else
    console.log('not valid!');
});
</script>

HTMLコード：

<form class="validateDontSubmit">
....
<button style="dislay:none">submit</button>
</form>
<button class="outside"></button>

javascript（Jqueryを使用）：

<script type="text/javascript">

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

$(document).ready(function(){
// using button outside trigger click
    $('.outside').click(function() {
        $('.validateDontSubmit button').trigger('click');
    });
});
</script>

これがあなたを助けることを願っています

非常に複雑な（特に非同期の）検証プロセスがある場合、簡単な回避策があります。

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>

この問題を解決する別の方法：

$('input').oninvalid(function (event, errorMessage) {
    event.target.focus();
});