前提・実現したいこと
Valiation.jsライブラリを使用してフォームのバリデーションを設定しています
エラーメッセージ等は表示されるのですが、submitの非活性化の切り替えが上手く動作しません。
初歩的な事で間違っているかもしれないのですが、私の知識不足で1人で解決できませんでした。
わかる方どうかご教授いただきたいです。
該当のソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<form id="form" class="Form" action="/*グーグルフォームに飛ぶ予定です*/" method="post">
<ul>
<li>
<label for="name">名前</label>
<input type="text" name="entry.1081701488" placeholder="お名前" value="">
<span class="error"></span>
</li>
<li>
<label for="mail">メールアドレス</label>
<input type="email" name="entry.1249159500" placeholder="メールアドレス" value="">
<span class="error"></span>
</li>
<li>
<label for="msg">内容</label>
<textarea name="entry.1006037710" placeholder="内容をご記入ください" ></textarea>
<span class="error"></span>
</li>
<li class="btn">
<button type="submit" name="send" disabled>送 信</button>
</li>
</ul>
</form>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.min.js'></script>
<script src="./node_modules/modaal/dist/js/modaal.min.js"></script>
<script src="./node_modules/jquery-validation/dist/jquery.validate.js"></script>
<script src="./dist/script.js"></script>
</body>
</html>
//valiation設定
const rule = {
'entry.1081701488':{required:true,minlength:2,maxlength:10},
'entry.1249159500':{required:true,email:true,},
'entry.1006037710':{required:true}
};
const msg = {
'entry.1081701488':{
required:"* 必須項目です",
minlength:"* 2文字以上ご入力ください",
maxlength:"* 10文字以内でご入力ください"
},
'entry.1249159500':{
required:"* 必須項目です",
email:"* メールアドレスをご入力ください"
},
'entry.1006037710':{
required:"* 用件をご記入ください",
}
};
$(function(){
$('#form').validate({
rules:rule,
messages:msg,
});
if($('#form').valid()){
$('button').attr('disabled',false);
}else{
$('button').attr('disabled',true);
}
});
試したこと
過去に同じ様な質問をされていた方がいたので、
そちらの回答を参考に行ってみましたが私のやり方が違うのか上手くできませんでした。
https://teratail.com/questions/67526
追記
$(function(){
$('#form').validate({
rules:rule,
messages:msg,
submitHandler:function(){
let submit = $('button').data("submit");
if(!submit){$('form ul').append("<li>送信完了しました</li>"); $('button').data("submit",true);}
else{$('form ul li:last-of-type').text('送信完了しました'); $('button').data("submit",true);}
$('button').attr('disabled',true); return false},
invalidHandler:function(){
let submit = $('button').data("submit");
if(!submit){$('form ul').append("<li>送信ができませんでした</li>");
$('button').data("submit",true);} return false}
});
});
https://teratail.com/questions/67526
参考にしたこちらのやり方は実装できたのですが、私がやりたい動作とは少し違っていました。
希望の操作
①入力項目が全て埋まっている時は<button>の「disabled」を削除、埋まっていない時は追加を行う。
HTMLInputElement.checkValidity()
こちらを使ったやり方だと私のやりたい様なことが実装できそうだったのですが、併用して使うとValiation.js
の方が今度は上手く反応せず、手詰まりでした。
Q&A
自己解決
