いくつかの異なるフィールドセットを持つフォームがあります。フィールドセットを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()
を使用します。
レガシーブラウザのサポートが必要ですか?読む。
実際には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()
がサポートされていない場合、ブラウザを少しだます必要があります。それで、私たちは何をしますか?
form.checkValidity()
を呼び出して、フォームの有効性を確認します。これにより、フォームが有効かどうかがわかりますが、検証UIは表示されません。コード内:
_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までテストしました)。
ある程度、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
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);
});
});
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>
これがあなたを助けることを願っています
私はトリックを見つけているようです: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>
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">