jquery validation pluginで設定したバリデーションメッセージが表示されない

聞きたいこと

jquery validation pluginを使用してバリデーションメッセージを表示したいと思っているのですが、自分で設定したバリデーションメッセージが表示されません(HTML5のバリデーションメッセージが表示されてしまいます)

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
  </head>
<body>
<form id="user-form" action="#">
  <label>username: </label>
  <input type="text" id="username" name="username" required="" minlength="2" maxlength="10"><br>
  <input type="submit">
</form>
<script type="text/javascript">
$(document).ready(function() {
  $('#user-form').validate();
  $('#user-form').validate({
    rules: {
      username: {
        required: true,
        minlength: 2,
        maxlength: 10
      }
    },
    messages: {
      username: {
        required: "This is required validation",
        minlength: "This is minlength validation",
        maxlength: "This is maxlength validation"
      }
    }
  })
})
</script>
</body>
</html>

すぐに実行できるように、JSFiddleのURLも下に載せます。

https://jsfiddle.net/s_kikuchi/afr7csp5/4/

試したこと

バリデーション対象のinputタグにid属性のみでなく、name属性も追加
バリデーション対象のinputタグに、required属性、minlength属性などバリデーション内容も追加

以上です。ブラウザの開発者ツールを確認してみても特にエラーらしいものも表示されておらず、手詰まりになってきています。。

m.ts10806

2019/02/21 07:57

細かくても仕分けないですがDOCTYPE をつけられているので</html>もつけていただきたく・・

m.ts10806

2019/02/21 08:01

確認したところ、出てきたメッセージは[This field is required.]でしたがこれはHTML5のデフォルトではなくjquery-validationのデフォルトメッセージですね。

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

回答1件

ベストアンサー

最初に$('#user-form').validate();を書かれていますが、ここで設定が確定してしまっているように見受けられます。
この1行はおそらく不要です。
なくしたところ[This is required validation]がでました。

投稿2019/02/21 08:03

m.ts10806

総合スコア80850

sabx

2019/02/21 08:16

回答いただきありがとうございました！無事エラーメッセージが表示されました・・！

m.ts10806

2019/02/21 08:19

解決されたようで何よりです

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！