Jquery validateが動かない
Jquery validateを導入したいのですが全く動きません。
分かる方いましたら教えてください。
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>お問い合わせ</title>
<script src="https://code.jquery.com/jquery3.6.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script src="validate.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
var form = document.getElementById('form');
if (form.reportValidity()) {
form.submit();
}
}
</script>
</head>
<body>
<form action="" method="post" id="form">
<div style="display: none;"><input type="text" name="wana" /></div>
<dl>
<dt>メール</dt>
<dd><input type="email" name="email" id="email"/></dd>
</dl>
<dl>
<dt>名前</dt>
<dd><input type="text" name="name" id="name"/></dd>
</dl>
<dl>
<dt>コメント</dt>
<dd><textarea name="msg" id="msg" cols="30" rows="10"></textarea></dd>
</dl>
<button type="submit" class="g-recaptcha" data-sitekey="6LeuAKIpAAAAAOq-64FETHesEi4Mwj4OGJ03q1cK" data-callback="onSubmit" data-action="submit">送信する</button>
</form>
</body>
</html>
$(function () {
$('#form').validate({
rules: {
name: {
required: true,
},
email: {
required: true,
email: true,
},
msg: {
required: true,
},
},
messages: {
name: {
required: 'お名前を入力してください',
},
email: {
required: 'メールアドレスを入力してください',
email: '正しいメールアドレスを入力してください'
},
msg: {
required: 'コメントを入力してください',
},
},
errorPlacement: function (error, element) {
error.insertAfter(element)
}
})
});
0
