LoginSignup
taka224
@taka224 (加藤 高明)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

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

2Answer

Jquery CDNのURLが間違っていませんか?

- <script src="https://code.jquery.com/jquery3.6.1.js"></script>
+ <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
0

Comments

  1. 一部は動くようなので、validate の書き方の問題では?

    scr1.png
  2. @taka224

    Questioner

    そちらのブラウザでは動くんですねー
    こちらのブラウザでは動かないです。

JavaScript が期待通り動かないときは、ブラウザのディベロッパーツールを開いて Console タブを見てください。そこにエラー情報が表示されていると思います。エラー情報に解決のためのヒントが見つかると思います。

0

Comments

  1. @taka224

    Questioner

    ありがとうございます
    エラーは何もありません

  2. CDN の url が間違っているので $(function () { の一文字目の $ でエラーになるはずですが?

    cdn.jpg

  3. ブラウザのディベロッパーツールを開いて Source タブでデバッグ(疑わしい場所にブレークポイントを置いてそこで止めてステップ実行)してください。それを今すぐにできる環境を持っているのは質問者さんだけで、それをやるのは質問者さんの務めだと認識してください。

Your answer might help someone💌