ワードプレスでオリジナルなフォームを組み込んでいて、未入力のフォーム部品がある場合送信ボタンを押しても送信させないためのjQueryコードをご紹介いたします。
required 属性を付与したフォーム部品を送信前にjQueryで検査
下記のようなrequired属性のあるフォームの部品があるフォームで、送信ボタンを押した瞬間に、required属性をjQueryで強制的に検証し任意の処理を行う事が可能です。
<form action='post' action=''> お名前 <input type="text" id='myname' required /> <input type="submit" id='submitbutton' /> </form>
jQueryのコードが下記のようになります。
<script>
jQuery(document).ready(function () {
jQuery('#submitbutton').on('click', function (e) {
if (! jQuery('form')[0].reportValidity()) {
alert('入力されていない項目があります');
e.preventDefault();
}
});
});
</script>
jQuery(document).ready でページが読み込まれた後にスクリプトを実行します。
jQuery(‘#submitbutton’).on(‘click’で送信ボタンが押された瞬間に、if (! jQuery(‘form’)[0].reportValidity()) {で最初のフォーム([0])で未入力の項目がある場合、アラートを出してe.preventDefault();でフォームの送信を停止します。
※ワードプレスでは$ではなくjQueryを使用します。
※reportValidity()は入力フィールドの 検証を行い、その検証エラーを強制表示する関数です(この為、その画面にとどまるならばブラウザーがエラーを自動表示してくれます)
下記のようにすることで任意のフォーム部品が未入力かを調べることも可能です。
if (! jQuery('form')[0].reportValidity()) {
var myname = $('#myname').val();
if(myname==''){
alert('お名前が入力されていません');
}
e.preventDefault();
}
ご参考になりましたら幸いです。
WordPress ワードプレスのテーマのカスタマイズや修正のご依頼・ご相談はWPドクターまでお気軽にお送りいただけましたら幸いです
