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

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

ただいまの
回答率

90.47%

  • PHP

    20828questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17003questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9279questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6926questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CakePHP

    2358questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

Formのないテキストボックスの入力値チェックを行いたい

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,112

k499778

score 501

環境 HTML,javascript,PHP,cakephp3

現在入力フォームを作成しています。

そのテキストボックスの入力値チェックを行いたいです。全角文字のみ入力できるといった。

ただ少し特殊で、このテキストボックスはFormタグに囲まれておらず。またボタンもsubmitボタンではありません。そのためinputタグのpattern属性でのエラーチェックを使うことができませんでした。

そこで、
pattern属性を使わず、
HTML,javascript,PHP,cakephp3などでエラーチェックをする方法はあるでしょうか?

ボタンを押したタイミング、あるいは、カーソルを失ったタイミングでエラーチェックをしたいと思っています。

cakephp3のFormクラスを使ったバリデーションもFormタグ、submitボタンがないためできませんでした。

もしわかる方がいらっしゃいましたらお教え頂けると幸いです。
よろしくお願い致します。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+1

input.reportValidity() で期待通りの動作しました。

<script>
'use strict';
function handleInput (event) {
  event.target.reportValidity();
}

function handleBlur (event) {
  var input = event.target;

  setTimeout(input.reportValidity.bind(input), 0)
}

document.addEventListener('focusout', function handleFocusout (event) {
  var input = event.target;

  if (input.id === 'sample') {
    input.reportValidity();
  }
}, false);
</script>
<label>input <input type="text" pattern="[^\u0000-\u007F]*" oninput="handleInput(event);"></label>
<label>blur <input type="text" pattern="[^\u0000-\u007F]*" onblur="handleBlur(event);"></label>
<label>focusout <input id="sample" type="text" pattern="[^\u0000-\u007F]*"></label>

(更新履歴)

  • 2016/03/31 01:40 input.checkValidity() を input.reportValidity() に修正
  • 2016/03/31 02:30 pattern 属性から ^$ を削除。blur, focusout イベントのコード追加。

Re: k499778 さん

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/31 00:52

    think49さん、回答有り難うございます。

    なるほど。
    ただ「submit.click();」もあって、自分の環境ではsubmitボタンもないんですよね。
    それでもいけそうでしょうか。


    HTML5なら外部ライブラリを利用しないでリアルタイム入力チェック出来る
    http://qiita.com/k-motoyan/items/75aeece8b73d5f87b3ae

    キャンセル

  • 2016/03/31 01:42

    checkValidity() は input 要素ノードの API で submit ボタンの制限はないと思いますが、リンク先は読んでいただけているでしょうか。
    検証してみたところ、input.checkValidity() ではなく、input.reportValidity() で動作しましたので親記事を修正しました(ryls-nmm さんの回答が正解です)。

    キャンセル

  • 2016/03/31 01:53

    すごく細かいところですが、pattern に ^ と $ はいらないです

    > This implies that the regular expression language used for this attribute is the same as that used in JavaScript, except that the pattern attribute is matched against the entire value, not just any subset (somewhat as if it implied a ^(?: at the start of the pattern and a )$ at the end).

    https://www.w3.org/TR/html5/forms.html#the-pattern-attribute

    キャンセル

  • 2016/03/31 02:44

    ryls-nmm さん、アドバイスありがとうございます。親記事を修正しました。
    検証して気が付いたのですが、「blur で reportValidity() をそのまま実行しても動作しない件」は focusout イベントを使うと解決できました。
    しかし、Firefox は focusout を実装してなく、HTMLInputElement.prototype.reportValidity がないのが絶望的ですね…。

    キャンセル

  • 2016/03/31 07:57

    お二方ともありがとうございます。
    現在リンク先を読んだり、think49さんが実際にJSFiddleにあげてくださったソースの理解に努めています。返答が遅くなっていることをお詫びします。

    キャンセル

  • 2016/03/31 08:13 編集

    Firefoxではblurとfocusoutのバリデーションが効かないんですね。(;_;)

    キャンセル

  • 2016/04/01 00:02

    一旦ボタン押下時にバリデーションを走らせることになりました。
    そのため、clickイベントを使ってreportValidityでメッセージを表示する方法で実装することができました。ご協力していただきありがとうございました。

    キャンセル

+1

idを与えて、キーボード押下、またはフォーカスを外したタイミングで、javascriptで入力値をチェックしてやれば可能だと思いますが、いかがでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/30 21:11 編集

    te2jiさん
    回答ありがとうございます。

    私もjqueryのblurメソッドを使って、カーソルを失ったタイミングでイベントを発生させ、条件分岐でもし全角([^\x20-\x7E])のときはアラートダイアログを表示する。

    といった構想はできています。
    ただ、できればアラートダイアログではなく、HTMLのpattern属性ののようなエラーメッセージの出し方をしたいと思っていました。
    あとはjsで正規表現の条件分岐をどうするかです。matchメソッドを使えばいいのかな。
    といろいろ考えている次第です。
    長くなってしまいすいません。
    やはりやり方としてはjsの条件分岐でマッチしているかどうか判定し、アラートを出す。とかになるのでしょうか?

    キャンセル

  • 2016/03/30 21:14

    maisumakunさんが提案された setCustomValidity で出来ると思うのですが、試していますでしょうか。
    https://teratail.com/questions/31028

    キャンセル

  • 2016/03/30 21:23 編集

    think49さん、回答ありがとうございます。
    もちろん試しました。
    ただFormタグとsubmitボタンがないと実現できませんでした。
    今回本文にあるように、
    Formタグとsubmitボタンがない状況なので、ただのテキストボックスとボタンがあるといった状況なので、どうしようかなと悩んでいる次第であります。

    キャンセル

  • 2016/03/30 22:03

    別で回答しました。

    キャンセル

  • 2016/03/31 00:05

    過去に関連した質問があるのですね。。。試行錯誤の上で今の質問にたどり着いているようなので、もう一度やりたいことを整理されたほうが良いと思います。
    普通に考えれば、入力値の半角を全角に変換することでユーザの手を煩わせることなく完了できるので、それが最適解です。
    それができない背景があればその理由を記載し、実装方法を相談するのが良いと思います。
    一応質問にざっくり回答すると
    ・エラーメッセージはjavascriptの記載次第でpattern属性のような表現が可能です。
    ・テキストエリアに入力された文言の正規表現での確認方法は、サンプルが多数あるので好きなモノを参考にして下さい。サンプルの発動トリガーをonClickから押下またはフォーカスの移動で書き換えると使えます。
    以上

    キャンセル

  • 2016/03/31 00:36

    te2jiさん
    返答ありがとうございます。
    なるほど。全角文字でしか入力できないように制御してしまうという発想もあるのですね。
    それが最適解なのですね。参考になります。

    そうですね。過去に関連した質問があります。
    最初はinputタグのpattern属性に正規表現を書いたらできると思っていたのですが、
    実際のソースを見ると、formタグやsubmitボタンがない状態で、inputタグのpattern属性が使えなくなってしまいました。

    そこで新たな質問を投稿させていただきました。
    多くの方にご協力いただき本当に感謝しています。

    エラーメッセージもjavascriptでpattern属性のような表現ができるのですね!
    もしよろしければキーワードだけでもお教えいただくことはできないでしょうか?

    キャンセル

  • 2016/04/01 00:03

    一旦ボタン押下時にバリデーションを走らせることになりました。
    そのため、clickイベントを使ってreportValidityでメッセージを表示する方法で実装することができました。ご協力していただきありがとうございました。

    キャンセル

+1

HTMLのpattern属性ののようなエラーメッセージの出し方をしたいと思っていました。

とあるので、

<body>
<input type="text" id="sample" pattern="\d+">
<p>↑フォームに属さないinput</p>
</body>
$("#sample").get(0).reportValidity()

とやればいいです
ブラウザのバリデーションエラー画面が出せます

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/31 00:29

    ryls-nmmさん
    回答ありがとうございます。

    そのような方法があるのですね。勉強になります。

    ただ実際に試してみたのですが、このコードだけではエラー画面を出すことができませんでした。操作が間違っているのでしょうか。あるいは他の記述も必要なのでしょうか。

    操作としては、pattern="[^\x01-\x7E]" に変えて、
    全角文字や半角文字を入力し、フォーカスを失わせたりしました。

    キャンセル

  • 2016/03/31 00:50

    上のコードでは「フォーカスをはずしたら」のところは含まれていません
    ```
    $("#sample").get(0).reportValidity()
    ```

    を手動で実行したら表示されるというサンプルです
    条件は数字のみならOKというものになってます

    フォーカスを外すのを加えるとこうなります
    ```
    $("#sample").on("blur", function(){
        var elem = this
        setTimeout(function(){
            elem.reportValidity()
        }, 0)
    })
    ```
    setTimeout がいますが、単純に↓だと Chrome の確認では動かなかったのでそうしています
    ```
    $("#sample").on("blur", function(){
        this.reportValidity()
    })
    ```
    また、 input イベントでは setTimeout 無しで動きます
    ```
    $("#sample").on("input", function(){
        this.reportValidity()
    })
    ```
    ただ、一文字入力ごとに表示されるのでちょっと邪魔かもしれないです

    キャンセル

  • 2016/03/31 01:04 編集

    回答ありがとうございます。
    とても詳しく書いていただき感謝しています。

    実際に以下のコードで試してみました。
    ただ全角以外はエラーを正規表現で記述しているのですが、全角文字の時もエラーメッセージが表示されてしまいました。もし何か原因がおわかりであれば教えていただけると幸いです。

    ------
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <body>
    <input type="text" id="sample" pattern="[^\x20-\x7E]">
    <p>↑フォームに属さないinput</p>
    </body>
    <script>
    $("#sample").on("blur", function(){
    var elem = this;
    setTimeout(function(){
    elem.reportValidity();
    }, 0)
    });
    </script>
    </html>

    ------

    正規表現に関しては、この書き方で普通のpattern属性のエラーチェックができたので、間違いではないです。

    キャンセル

  • 2016/03/31 01:10

    試しに「あ」とうってみたところエラーがでなく正常に動いてそうです
    「a」だとエラーでした

    「あいうえお」などでは正規表現的にエラーです
    その正規表現では一文字しか許可していないです

    キャンセル

  • 2016/03/31 01:16

    あと、あまり問題ないかもですがその正規表現だと半角カタカナなど特殊な半角文字が入力可能です

    マイナーですが半角矢印なんてものも
    半角:←↓↑→
    全角:←↓↑→

    キャンセル

  • 2016/03/31 08:04

    ryls-nmm返答ありがとうございます。
    1文字しか許可していないのですか。。

    以下のBAでは期待通りの動きをしていたのですが、処理の違いが何か影響しているのかな。。
    https://teratail.com/questions/31041

    いろいろとアドバイスありがとうございます。

    キャンセル

  • 2016/03/31 08:56

    正規表現を [^\u0000-\u007F]* に変えると、エラーメッセージを期待通り表示することができました。
    ただ今の状態だとフォーカスが抜けてしまいます。
    このやり方とthink49さんのやり方を組み合わせればうまくエラーチェックもして、フォーカスも抜けないようにできるのでしょうか?
    また他のブラウザでもこの書き方は使えるのでしょうか?

    色々聞いてしまい申し訳ないですが、お答えいただけると助かります。

    キャンセル

  • 2016/04/01 00:02

    一旦ボタン押下時にバリデーションを走らせることになりました。
    そのため、clickイベントを使ってreportValidityでメッセージを表示する方法で実装することができました。ご協力していただきありがとうございました。

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る

  • PHP

    20828questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17003questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9279questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6926questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CakePHP

    2358questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。