表題の件で対応したいのですが、解決方法が不明な為どなたかご教授いただければと存じます。
●やりたいこと
名前カナ 名前 の全ての項目が正しく設定されている場合はボタンを活性化し、それ以外は非活性とする
■止まっている点
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>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/30 06:49
2018/07/31 11:21