質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.56%

HTML5のrequiredについて

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 366

kinisinai

score 22

HTML5のrequiredはsubmitが押された時に発生すると調べた結果わかったのですがsubmitではなく入力チェックを行いたいinputからフォーカスが外れた時に入力なしならチェックしたいのですが可能でしょうか?

<追記>
下記のようコードでテーブルをクリックしたら編集可能になるものを作成しているのですがその際に編集された場所が空ならrequiredを使ってフォーカスが離れたときに「必須です」みたいなのが出るように実装したのですがどうすればよいでしょうか?

<script>
    jQuery(function($) {
        $('.tete').click(function() {
            //classでonを持っているかチェック
            if (!$(this).hasClass('on')) {
                //編集可能時はclassでonをつける
                $(this).addClass('on');
                var txt = $(this).text();
                //テキストをinputのvalueに入れてで置き換え
                $(this).html('<input type="text" value="'+txt+'" required="required"/>');
                //同時にinputにフォーカスをする
                $('.tete > input').focus().blur(function() {
                    var inputVal = $(this).val();
                    //もし空欄だったら空欄にする前の内容に戻す
                    if (inputVal === '') {
                        inputVal = '';
                    }
                    ;
                    //編集が終わったらtextで置き換える
                    $(this).parent().removeClass('on').text(inputVal);
                });
            }
            ;
        });
    });
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kinisinai

    2019/06/06 20:44

    PHP、laravel は使用していたので追加しました。
    コードの方追加したのでもしよろしければどのようにすれば良いかご教授いただけると幸いです

    キャンセル

  • m.ts10806

    2019/06/06 20:46

    現在の内容とは無関係なのでタグはずしてください

    キャンセル

  • kinisinai

    2019/06/06 20:50

    すみません。外させていただきました。

    キャンセル

回答 3

checkベストアンサー

0

checkValidity() を呼び出せば、任意のタイミングでバリデーションする事が出来ます。
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation#The_HTML5_constraint_validation_API
https://www.google.com/search?q=checkValidity

required属性に限らず、HTML Standardで用意された全てのフォームバリデーションが働く便利なメソッドです。

Re: obake_さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/07 12:20

    checkValidity()で使うとtrueかfalseで帰ってきますよね?
    それでどうやってrequiredの「必須です」みたいなのを表示させるのでしょうか?

    キャンセル

  • 2019/06/07 13:00

    https://teratail.com/questions/27111 に書いた内容を意図していました。

    キャンセル

0

ブラウザに依存しますね
firefoxあたりだと一度入力して値を削除したときにもコーションがでます

どうしてもブラー処理が必要ならjavascriptをかますことです

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/06 18:49

    調べてる時にブラウザ依存の件は出てきましたがやはりそうなりますか…
    とりあえず一度実装してから考えてみます!

    キャンセル

0

可能です……だけでは字数制限にかかるので例

document.addEventListener('focusout', function(event) {
  const target = event.target;
  if (target.nodeName.toLowerCase() !== 'input') {
    return true;
  }

  if (!target.checkValidity()) {
    console.log(target, 'invalid');
  }

  return true;
}, false);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/06 18:48

    ありがとうございます!
    まだ試せる環境にいないため明日以降試して僕にも実装できたらベストアンサーにさせていただきます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.56%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる