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

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

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

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

jQuery

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

Q&A

解決済

2回答

3858閲覧

特定条件でボタンの活性化・非活性を分けたい

abab7200

総合スコア120

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/07/29 03:31

表題の件で対応したいのですが、解決方法が不明な為どなたかご教授いただければと存じます。

●やりたいこと
名前カナ 名前 の全ての項目が正しく設定されている場合はボタンを活性化し、それ以外は非活性とする

■止まっている点
kana-icon name-icon のチェックアイコンが、全て表示されている場合の条件で活性化と非活性を設定したが、
チェックアイコンの非表示はhideで設定しているため、lengthではtureの条件になってしまい
初期の画面読み込みでもボタンが活性化してしまう。
要素をremoveしてみたが、removeした後にappendしようとしても項目が復活しない

止まっている部分のソース

// 画面読み込み時にアイコンが表示されないようにする $('#kana-icon').hide(); $('#name-icon').hide(); // #以下ボタンの非活性・活性化 if ($('#kana-icon').length&&$('#name-icon').length) { $("#buttonCheck").prop("disabled", false); } else { $("#buttonCheck").prop("disabled", true); }

全ソース

<!DOCTYPE html> <html lang="ja"> <head> <title>テストフォーム</title> <!--JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/yeti/bootstrap.min.css" rel="stylesheet"> <!--fontawesome用--> <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script> <script> $(function () { // 画面読み込み時にアイコンが表示されないようにする $('#kana-icon').hide(); $('#name-icon').hide(); // #以下ボタンの非活性・活性化 if ($('#kana-icon').length&&$('#name-icon').length) { $("#buttonCheck").prop("disabled", false); } else { $("#buttonCheck").prop("disabled", true); } $('#name').blur(function () { // 空値及び数字記号が入っていないかチェックするバリデーション emptyNameCheck($(this)); }); $('#name-kana').blur(function () { // ひらがなを自動変換するイベントの呼び出し kanaChange($(this)); // // 空値及びカナ以外の値が入っていないかチェックするバリデーション emptyKanaCheck($(this)); }); emptyNameCheck = function (ele) { var val = ele.val(); // 空値の場合、背景へCSSクラス適用し、テキストを追加 if (val == "") { $("#msg-name").addClass('color'); $("#msg-name").text("入力されていません。"); $('#name-icon').hide(); } // 数字記号が入っている場合背景へCSSクラス適用し、テキストを追加 else if (val.match(/^([\w\u3040-\u309f])*$|\d+|[a-zA-Z]|[!-/]|[:-?]|[[-`]|[{-~]|["!”#$%&’()=|‘{+*}<>?_-^¥@「;:」、。・" 〜]/)) { $('#msg-name').addClass('color'); $("#msg-name").text("名前が正しくありません。"); $('#name-icon').hide(); } else { $('#msg-name').removeClass('color'); $("#msg-name").text(""); $('#name-icon').show(); } }; kanaChange = function (ele) { var val = ele.val(); // 正規表現でひらがなを引数の値に置換 var kana = val.replace(/[ぁ-ん]/g, function (s) { // ユニコード値でカナに変換 return String.fromCharCode(s.charCodeAt(0) + 0x60) }); if (val.match(/[ぁ-ん]/g)) { $(ele).val(kana) } }; emptyKanaCheck = function (ele) { var val = ele.val(); // 空値の場合、テキストを追加 if (val == "") { $("#msg-kana").addClass("color"); $("#msg-kana").text("入力されていません。"); $("#kana-icon").hide(); } // カナ以外の値が入っている場合、テキストを追加 else if (val.match(/[^ぁ-んァ-ン \s]+/)) { $("#msg-kana").addClass("color"); $("#msg-kana").text("全角カナ以外が登録されています。"); $("#kana-icon").hide(); } else { $("#msg-kana").removeClass("color"); $("#msg-kana").text(""); $("#kana-icon").show(); } }; }); </script> <style> .color { color: red; } .m-t-50 { margin-top: 50px; } .flex { display: flex; } .icon_design { color: green; margin-top: 2px; } .input_design { border: 1px solid black; } .submit-color { background: #8bc34a; color: white; width: auto; padding: 10px 30px; font-size: 20px; } </style> </head> <body> <div class="content container"> <div class="row"> <div class="flex m-t-50"> <div class="title-label col-xs-4 col-md-3"> <label>お名前フルネーム(全角)</label> </div> <div class="input-label col-xs-6 col-md-3"> <input type="text" id="name" class="input_design" placeholder="山田 太郎"> <div id="msg-name"></div> </div> <div class="icon_design col-xs-2" id="name-icon"> <i class="fa fa-check-circle"></i> </div> </div> <div class="flex m-t-50"> <div class="title-label col-xs-4 col-md-3"> <label>お名前フルネームカナ(全角)</label> </div> <div class="input-label col-xs-6 col-md-3"> <input type="text" id="name-kana" class="input_design" placeholder="ヤマダ タロウ"> <div id="msg-kana"></div> </div> <div class="col-xs-2 icon_design col-md-3" id="kana-icon"> <i class="fa fa-check-circle"></i> </div> </div> <div class="m-t-50"> <button class="submit-color" id="buttonCheck">会員登録する</button> </div> </div> </div> </body> </html>

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

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

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

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

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

guest

回答2

0

ベストアンサー

Form Validation

Form Validationを使えば、特別な事をせずとも ::invalid な要素があるだけで submit 出来なくなります。

(2018/07/31 20:17追記)
上記リンク先は情報が古いと指摘を頂いた為、新しい情報を追記しました。

<input pattern>

pattern属性を使って検証すれば、フォーム送信前に検証できると思います。

Re: abab7200 さん

投稿2018/07/29 05:27

編集2018/07/31 11:19
think49

総合スコア18156

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

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

think49

2018/07/31 11:21

追記しました。 HTML5 Rocksは平易な情報としてある程度の信頼を置いていましたが、情報が更新されないのは痛いですね。 鮮度/確度の高さで選ぶと日本語の情報があまりない気がします。
guest

0

今の作りだと実現がちょっと難しく、コードを結構組み替える必要があるので、
改修のヒントだけ。

  • iconは表示非表示ではなくオブジェクトの付け外し(remove,append)で対応しては。

同じアイコンを利用するわけだし。

  • ボタンの活性非活性はlengthではなくチェック関数実行の時に判定処理を入れて、両方trueのときのみ活性化しては。

チェック結果を保持しておく変数を用意しておけば良いかなと。

投稿2018/07/29 04:49

m.ts10806

総合スコア80765

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問