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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

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

Q&A

解決済

2回答

1365閲覧

JavaScript 入力チェック

minusion

総合スコア17

JavaScript

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

0グッド

0クリップ

投稿2018/05/16 03:18

JavaScriptでウィンドウがフォーカスアウトされた時に入力チェックを行いエラーが表示されるようにしてみたのですが、これでは画面遷移をするまでエラーが出続けてしまい、悪戦苦闘しております。

JavaScript

1$(document).ready(function() { 2 3 4 // 全角文字 5 $("input[name='zenkaku']").focusout(function(){ 6 7 // 文字チェック 正規表現 8 if(!$(this).val().match(/^[^\x01-\x7E\xA1-\xDF]+$/)){ 9 10 // エラー表示 11 $(this).before('<p>※全角文字のみです</p>'); 12 13 // 赤文字 14 $(this).prev().css('color','red'); 15 } 16 });

HTML

1<div class="zenkaku" id="zenkaku"> 2 <p>全角文字</p> 3 <input type="text" name="zenkaku" value=""/> 4 <br /> 5</div>

色々と調べたのですが、そもそもフォーカスアウトした後に再度同じチェックをすることが可能なのかどうかすらわからない状態です。

どなたか、ご存知な方いらっしゃいましたら教えていただけると助かります。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

画面遷移をするまでエラーが出続けてしまい

質問文の文意が分かりにくいのですが、おそらく

「1)エラーとなるデータを入力する→2)エラー表示になる→3)エラーとならないデータを入力する→4)エラー表示のまま」

↑上記4の状態を解消したい、ということだろうと推測します。

$("input[name='zenkaku']").focusout(function(){ // 文字チェック 正規表現 if(!$(this).val().match(/^[^\x01-\x7E\xA1-\xDF]+$/)){

エラーになった時の処理しか記述していないので、一度エラーになったら常時エラー表示になるのは当然です。

エラー解除の処理をelseブロックに記述する必要があります。

// エラー表示 $(this).before('<p>※全角文字のみです</p>');

↑これが消えない?そりゃhtmlの文書構造やエラー表示の方法が悪いので、見直さないとダメですね。

投稿2018/05/16 03:31

tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

こういったところでしょうか。
エラー文のクラスをつけて、一つ前にそのクラスがあるかどうかで判定すれば、何個も出なくなります。
OKの時に、エラー文があれば削除する処理もつけておきました。

js

1 $("input[name='zenkaku']").focusout(function(){ 2 // 文字チェック 正規表現 3 if(!$(this).val().match(/^[^\x01-\x7E\xA1-\xDF]+$/)){ 4 // エラー表示 5 if($(this).prev('.error').length == 0){ 6 $(this).before('<p class="error">※全角文字のみです</p>'); 7 } 8 }else{ 9 //OK 10 if($(this).prev('.error').length > 0){ 11 //エラー文があれば削除 12 $(this).prev('.error').remove(); 13 } 14 } 15 });

自分は、入力したらすぐ間違っているか分かるので、その都度チェックされていた方が好みです。

cssは分離しておいた方が良いです。

css

1 .error { 2 color: red; 3 } 4

投稿2018/05/16 03:31

編集2018/05/16 03:32
kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問