Q&A
jquery.validate.min.jsとjquery.validate.js両方よんでいるのはなぜでしょう？
前提・実現したいこと
問い合わせフォームを作成し、validateプラグインの入力チェック追加したのですが
機能しない状態です。
フレームワークはBootstrapのver4.4を使用しています。
入力チェックを行いたいのですが・・
どなたかご教示ください。
よろしくお願いいたします。
該当のソースコード
<body> <div class="row"> <div class="col-6"> <h1>お問い合わせ</h1> </div> </div> <form method="post" action="" id="applyForm"> <div class="form-group"> <label for="name">氏名 <span class="badge badge-danger">必須</span></label> <input type="text" class="form-control" id="shimei" name="name" placeholder="Name"> </div> <div class="text-center"> <button type="submit" class="btn btn-primary" id="button" href="index.html">ボタン</button> </div> </form> <script src="js/bootstrap-4.4.1.js"></script> <script src="js/popper.min.js"></script> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/jquery.validate.min.js" ></script> <script src="js/jquery.validate.js" ></script> <script>###//入力チェック
$("#applyForm").validate({
rules: {
simei: {
required: true,
maxlength: 20
}
},
messages: {
simei: {
required: "お名前を入力してください。",
maxlength: "お名前は20文字以内で入力してください。"
},
}
});
</script>
google chromeで処理の確認の為
開発ツールでjavascriptファンクションにブレークポイント貼ろうとしたのですが、
処理内にブレークポイントが貼れません。
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
html
1<label for="name">氏名 <span class="badge badge-danger">必須</span></label> 2<input type="text" class="form-control" id="shimei" name="name" placeholder="Name">
ここを
html
1<label for="shimei">氏名 <span class="badge badge-danger">必須</span></label> 2<input type="text" class="form-control" id="shimei" name="shimei" placeholder="Name">
と変えてみたら動きますでしょうか？
js
1rules: { 2 simei: { 3 required: true, 4 maxlength: 20 5 } 6},
で参照しているのがinputのidではなくnameの方かなと思います
投稿2020/06/24 01:29
編集2020/06/24 01:32
総合スコア37
あなたの回答
tips
プレビュー
