フォームでエラーメッセージが表示されている時、submitボタンをdisabled状態に、エラーメッセージがひとつも表示されていない時はdisabledを解除という動きにしたいです。よろしくお願い致します。
html
<form> <ul> <li class="input_wrapper half"> <label class="input_ttl required">お名前</label> <input id="lastname" type="text" name="lastname" required> <input id="firstname" type="text" name="firstname" required> <p class="err_text">必須項目です。</p> </li> <li class="input_wrapper"> <label class="input_ttl required">電話番号 <input type="tel" name="tel"> <p class="err_text">必須項目です。</p> <p class="err_tel">ハイフンを含めず数字のみを正しく入力してください。</p> </label> </li> <li class="input_wrapper"> <label class="input_ttl required">メールアドレス <input type="email" name="email" required> <p class="err_text">必須項目です。</p> <p class="err_email">正しく入力してください。</p> </label> </li> <li class="input_wrapper"> <label class="input_ttl required">お問い合わせ内容 <textarea name="content" required></textarea> <p class="err_text">入力してください。</p> </label> </li> </ul> <button type="submit" class="conversion" disabled>送信する</button> </form>
css
form .err_text, form .err_email, form .err_tel { display: none; margin-top: 10px; font-size: calc(1.4rem/1.6); color: #DE3C3C; }
jQuery
$(function () { let error; $('input,textarea').on("blur", function () { let value = $(this).val(); let err_text = $(this).parents('li').find('.err_text'); if (value == "" || !value.match(/[^\s\t]/)) { error = true; $(err_text).css('display','block'); }else{ $(err_text).css('display','none'); } }); $('input[name="email"]').blur(function(){ if($(this).val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){ $('.err_email').css('display','none'); }else{ error = true; $('.err_email').css('display','block'); } }); $('input[name="tel"]').blur(function(){ if($(this).val().match(/^[0-9]+$/)){ $('.err_tel').css('display','none'); }else{ error = true; $('.err_tel').css('display','block'); } }); if($('.err_text').css("display") == "block" || $('.err_mail').css("display") == "block" || $('.err_tel').css("display") == "block") { $('button[type="submit"]').prop('disabled',true); } else { $('button[type="submit"]').prop('disabled',false); } });
まだ回答がついていません
会員登録して回答してみよう