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

総合スコア633

2016/03/30 15:29

ryls-nmmさん回答ありがとうございます。そのような方法があるのですね。勉強になります。ただ実際に試してみたのですが、このコードだけではエラー画面を出すことができませんでした。操作が間違っているのでしょうか。あるいは他の記述も必要なのでしょうか。操作としては、pattern="[^\x01-\x7E]" に変えて、全角文字や半角文字を入力し、フォーカスを失わせたりしました。

2016/03/30 15: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/30 16:05 編集

回答ありがとうございます。とても詳しく書いていただき感謝しています。実際に以下のコードで試してみました。ただ全角以外はエラーを正規表現で記述しているのですが、全角文字の時もエラーメッセージが表示されてしまいました。もし何か原因がおわかりであれば教えていただけると幸いです。 ------ <!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/30 16:10

試しに「あ」とうってみたところエラーがでなく正常に動いてそうです「a」だとエラーでした「あいうえお」などでは正規表現的にエラーですその正規表現では一文字しか許可していないです

2016/03/30 16:16

あと、あまり問題ないかもですがその正規表現だと半角カタカナなど特殊な半角文字が入力可能ですマイナーですが半角矢印なんてものも半角：￩￬￪￫全角：←↓↑→

2016/03/30 23:04

ryls-nmm返答ありがとうございます。１文字しか許可していないのですか。。以下のBAでは期待通りの動きをしていたのですが、処理の違いが何か影響しているのかな。。 https://teratail.com/questions/31041 いろいろとアドバイスありがとうございます。

2016/03/30 23:56

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

2016/03/31 15:02

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

行動規範の内容に同意します

ベストアンサー

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

HTML
1<script>
2'use strict';
3function handleInput (event) {
4  event.target.reportValidity();
5}
6
7function handleBlur (event) {
8  var input = event.target;
9
10  setTimeout(input.reportValidity.bind(input), 0)
11}
12
13document.addEventListener('focusout', function handleFocusout (event) {
14  var input = event.target;
15
16  if (input.id === 'sample') {
17    input.reportValidity();
18  }
19}, false);
20</script>
21<label>input <input type="text" pattern="[^\u0000-\u007F]*" oninput="handleInput(event);"></label>
22<label>blur <input type="text" pattern="[^\u0000-\u007F]*" onblur="handleBlur(event);"></label>
23<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/30 12:36

編集2016/03/30 17:31

総合スコア18162

2016/03/30 15:52

think49さん、回答有り難うございます。なるほど。ただ「submit.click();」もあって、自分の環境ではsubmitボタンもないんですよね。それでもいけそうでしょうか。 HTML5なら外部ライブラリを利用しないでリアルタイム入力チェック出来る http://qiita.com/k-motoyan/items/75aeece8b73d5f87b3ae

2016/03/30 16:42

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

2016/03/30 16: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/30 17:44

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

2016/03/30 22:57

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

2016/03/30 23:36 編集

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

2016/03/31 15:02

行動規範の内容に同意します

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

投稿2016/03/30 11:59

退会済みユーザー

総合スコア0

2016/03/30 16:00 編集

te2jiさん回答ありがとうございます。私もjqueryのblurメソッドを使って、カーソルを失ったタイミングでイベントを発生させ、条件分岐でもし全角([^\x20-\x7E])のときはアラートダイアログを表示する。といった構想はできています。ただ、できればアラートダイアログではなく、HTMLのpattern属性ののようなエラーメッセージの出し方をしたいと思っていました。あとはjsで正規表現の条件分岐をどうするかです。matchメソッドを使えばいいのかな。といろいろ考えている次第です。長くなってしまいすいません。やはりやり方としてはjsの条件分岐でマッチしているかどうか判定し、アラートを出す。とかになるのでしょうか？

2016/03/30 12:14

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

2016/03/30 12:30 編集

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

2016/03/30 13:03

別で回答しました。

退会済みユーザー

2016/03/30 15:05

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

2016/03/30 15:36

te2jiさん返答ありがとうございます。なるほど。全角文字でしか入力できないように制御してしまうという発想もあるのですね。それが最適解なのですね。参考になります。そうですね。過去に関連した質問があります。最初はinputタグのpattern属性に正規表現を書いたらできると思っていたのですが、実際のソースを見ると、formタグやsubmitボタンがない状態で、inputタグのpattern属性が使えなくなってしまいました。そこで新たな質問を投稿させていただきました。多くの方にご協力いただき本当に感謝しています。エラーメッセージもjavascriptでpattern属性のような表現ができるのですね！もしよろしければキーワードだけでもお教えいただくことはできないでしょうか？