前提・実現したいこと
フォームのバリデーションをするためにリアルタイムにテキストエリアのvalue値を取得するというところまではできたのですが、クッキーに値があった場合にも同様に動かしたいと思いました。
クッキーは確認画面からhistory.backで戻ってきた場合に判別して再度value値を取得するために使っています。
クッキーを取得してfunction hoge(elm)のところまでは動いているようなのですが、
その中身のreturn function()の部分が動かないようです。
アドバイスいただけると助かります。
該当のソースコード
<form id="contact-form" action="./check.php" method="post" data-validate> <dl class="relative input_set"> <dt><label for="name">ご相談内容</label></dt> <dd><textarea cols="40" rows="8" name="message" id="message" class="voluntary"></textarea><span class="option"></span></dd> </dl> <dl class="relative input_set"> <dt><label for="name">お名前</label></dt> <dd> <input type="text" name="name" id="name" value="" placeholder="太郎" class="necessary v_required" required> <span class="required"></span> </dd> </dl> <dl class="relative input_set"> <dt><label for="name">メールアドレス</label></dt> <dd> <input type="text" name="mail" id="mail" value="" placeholder="半角英数 (例:info@example.com)" class="necessary v_mail" required> <span class="required"></span> </dd> </dl> <dl class="relative input_set"> <dt><label for="name" required>電話番号</label></dt> <dd> <input type="text" name="tel" id="tel" value="" class="necessary v_phone" required> <span class="required" required></span> </dd> </dl> <div class="btn"> <button type="submit" data-icon="check" class="form_btn" id="send_button">入力内容のご確認</button> </div> </form> </div> </div> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> var c_val = cookieVal('check'); // クッキー取得 function cookieVal(key){ return ((document.cookie + ';').match(key + '=([^¥S;]*)')||[])[1]; } if(c_val == "true"){ $("select").each(function(){ hoge(this); }); $("textarea,input").each(function(){ hoge(this); }); }; $("select").each(function(){ $(this).on('change', hoge(this)); }); $("textarea,input").each(function(){ $(this).on('keyup', hoge(this)); }); var str; var required; var voluntary; function hoge(elm){ var v, old = elm.value; console.log(elm); return function(){ if(old != (v=elm.value)){ old = v; str = $(this).val(); required = $(this).hasClass('v_required'); required = $(this).hasClass('v_required'); required = $(this).hasClass('v_required'); voluntary = $(this).hasClass('voluntary'); v_email = $(this).hasClass('v_mail'); v_phone = $(this).hasClass('v_phone'); var reg_email = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/; var reg_phone = /^(0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4})$/; if(required == true){ if(str == ""){ $(this).removeClass("inputOk"); $(this).addClass("inputError"); $(this).before('<div class="add">必須項目です</div>'); } else { $(this).addClass("inputOk"); $(this).removeClass("inputError"); $(this).prev().remove(); } }else if(voluntary == true){ if(str == ""){ $(this).removeClass("optionOk"); } else { $(this).addClass("optionOk"); } }else if(v_email == true){ if(str == ""){ $(this).removeClass("inputOk"); $(this).addClass("inputError"); $(this).prev(".add").remove(); $(this).before('<div class="add">必須項目です</div>'); }else if(reg_email.test(str)){ $(this).addClass("inputOk"); $(this).removeClass("inputError"); $(this).prev(".add").remove(); } else { $(this).removeClass("inputOk"); $(this).removeClass("inputError"); $(this).prev(".add").remove(); $(this).before('<div class="add">半角数字とハイフンのみご利用できます</div>'); } }else if(v_phone == true){ if(str == ""){ $(this).removeClass("inputOk"); $(this).addClass("inputError"); $(this).prev(".add").remove(); $(this).before('<div class="add">必須項目です</div>'); } else if(reg_phone.test(str)) { $(this).addClass("inputOk"); $(this).removeClass("inputError"); $(this).prev(".add").remove(); } else { $(this).removeClass("inputOk"); $(this).removeClass("inputError"); $(this).prev(".add").remove(); $(this).before('<div class="add">半角数字とハイフンのみご利用できます</div>'); } } } } } </script>
回答2件
あなたの回答
tips
プレビュー