エラーメッセージが表示されている時、submitボタンをdisabled状態にしたい。

フォームでエラーメッセージが表示されている時、submitボタンをdisabled状態に、エラーメッセージがひとつも表示されていない時はdisabledを解除という動きにしたいです。よろしくお願い致します。

html
1<form>
2　<ul>
3　　<li class="input_wrapper half">
4	<label class="input_ttl required">お名前</label>
5	<input id="lastname" type="text" name="lastname" required>
6	<input id="firstname" type="text" name="firstname" required>
7	<p class="err_text">必須項目です。</p>
8　　</li>
9　　<li class="input_wrapper">
10　　　<label class="input_ttl required">電話番号
11　　　　<input type="tel" name="tel">
12　　　　<p class="err_text">必須項目です。</p>
13　　　　<p class="err_tel">ハイフンを含めず数字のみを正しく入力してください。</p>
14　　　</label>
15　　</li>
16　　<li class="input_wrapper">
17　　　<label class="input_ttl required">メールアドレス
18　　　　<input type="email" name="email" required>
19　　　　<p class="err_text">必須項目です。</p>
20　　　　<p class="err_email">正しく入力してください。</p>
21　　　</label>
22　　</li>
23　　<li class="input_wrapper">
24	<label class="input_ttl required">お問い合わせ内容
25	　<textarea name="content" required></textarea>
26	　<p class="err_text">入力してください。</p>
27	</label>
28　　</li>
29　</ul>
30　<button type="submit" class="conversion" disabled>送信する</button>
31</form>
32

css
1form .err_text,
2form .err_email,
3form .err_tel {
4	display: none;
5	margin-top: 10px;
6	font-size: calc(1.4rem/1.6);
7	color: #DE3C3C;
8}

jQuery
1$(function () {
2	let error;
3	$('input,textarea').on("blur", function () {
4	  let value = $(this).val();
5	  let err_text = $(this).parents('li').find('.err_text');
6	  if (value == "" || !value.match(/[^\s\t]/)) {
7		error = true;
8		$(err_text).css('display','block');
9	  }else{
10		$(err_text).css('display','none');
11	  }
12	});
13
14	$('input[name="email"]').blur(function(){
15		if($(this).val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
16			$('.err_email').css('display','none');
17		}else{
18			error = true;
19			$('.err_email').css('display','block');
20		}
21	});
22
23	$('input[name="tel"]').blur(function(){
24		if($(this).val().match(/^[0-9]+$/)){
25			$('.err_tel').css('display','none');
26		}else{
27			error = true;
28			$('.err_tel').css('display','block');
29		}
30	});
31
32	if($('.err_text').css("display") == "block" || $('.err_mail').css("display") == "block" || $('.err_tel').css("display") == "block") {
33	　$('button[type="submit"]').prop('disabled',true);
34	} else {
35	　$('button[type="submit"]').prop('disabled',false);
36	 }
37
38});
39

maisumakun

2022/05/16 09:10

現状ではどうなるのですか？

yc-www10

2022/05/16 09:18

現状では、一つの入力欄を入力しただけでdisabledが解除されてしまいます。質問にjqueryを追記しました。

行動規範の内容に同意します

回答1件

if($('.err_text').css("display") == "block" || $('.err_mail').css("display") == "block" || $('.err_tel').css("display") == "block") { の部分のコードを関数にして、<form> の change イベントリスナとして登録して、3つある blur イベントリスナはすべて change イベントに変更しましょう。

投稿2022/05/17 04:13