web-dev-qa-db-ja.com

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

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

ユーザーがJSリンクをクリックして次のフィールドセットに移動すると、現在のフィールドセットで検証を実行し、問題がある場合にユーザーが先に進むのをブロックする必要があります。

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

現在、novalidateはJavascriptを使用しています。ネイティブメソッドを使用することをお勧めします。 :)

javascriptjqueryvalidationhtml5
72
Drew

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

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

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

48
robertc

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

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

実際にはis検証を手動でトリガーできます。

私は答えにプレーン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などのレガシーブラウザーのサポートは必要ありませんか？これはあなたのためです。

最新のすべてのブラウザー supportform要素の reportValidity() メソッド。

_triggerButton.onclick = function () {
    form.reportValidity()
}
_

これで完了です。また、 こちらがこのアプローチを使用した簡単なCodePen です。

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

以下は、古いブラウザでreportValidity()をエミュレートする方法の詳細な説明です。

ただし、これらのコードブロックを自分でプロジェクトにコピーして貼り付ける必要はありません。 ponyfill / polyfill が用意されています。

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

  1. form.checkValidity()を呼び出して、フォームの有効性を確認します。これにより、フォームが有効かどうかがわかりますが、検証UIは表示されません。
  2. フォームが無効な場合、一時的な送信ボタンを作成し、クリックをトリガーします。フォームは無効であるため、know無効ですactually送信しますが、ユーザーに検証のヒントを表示します。一時送信ボタンはすぐに削除されるため、ユーザーには表示されません。
  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の例を示します。

68
Loilo

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

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

検証ボタンにonclickリスナーを設定して、グローバルフラグ（たとえばjustValidate）を設定し、このクリックがフォームの検証をチェックすることを意図していることを示します。

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

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

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

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

20
Xieranmaya

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

3
Anatoli Papirovski

フィールドセットへの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);

    });

});
3
wreleven

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>

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

1
Hưng Trịnh

私はトリックを見つけているようです：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>
1
chenxin
var field = $("#field")
field.keyup(function(ev){
    if(field[0].value.length < 10) {
        field[0].setCustomValidity("characters less than 10")
        
    }else if (field[0].value.length === 10) {
        field[0].setCustomValidity("characters equal to 10")
        
    }else if (field[0].value.length > 10 && field[0].value.length < 20) {
        field[0].setCustomValidity("characters greater than 10 and less than 20")
        
    }else if(field[0].validity.typeMismatch) {
        field[0].setCustomValidity("wrong email message")
        
    }else {
        field[0].setCustomValidity("") // no more errors
        
    }
    field[0].reportValidity()
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="email" id="field">
0
Ilya webdev