フォームエラーメッセージ、英語のバリデーションを変更したい

フォームのエラーが「Please enter a valid email address.」と表示されてしまいます。
日本語にしたいです。
出来れば任意の文章にしたいです。
以下のコードを使用しています。

jqueryのライブラリはこちらgithub

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="css/jquery.steps.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="js/jquery.cookie-1.3.1.js"></script>
<script src="js/jquery.steps.js"></script>
</head>
<body>
<form id="example-form" action="#" class="">
 <p class="error"></p>
 <input type="email" name="email" placeholder="info@hogehoge.com" id="email">
 <button type="submit" value="送信">送信</button>
</form>
<script>
jQuery(function() {
    (function ($){
        var form = $("#example-form");
        form.validate({
            errorPlacement: function errorPlacement(error, element) { element.before(error); },
                rules: {
                    confirm: {
                        required: true
                    }
                },
                errorPlacement: function (err, elem) {
                    err.appendTo($('p.error'));
                }
        });
    })(jQuery);
});
</script>
</body>
</html>

試したこと①
バリデーションエラーの言語設定

var email = document.getElementById("email");
email.addEventListener("keyup", function (event) {
 if(email.validity.typeMismatch) {
  email.setCustomValidity("メールアドレスだってばよ！");
 } else {
  email.setCustomValidity("");
 }
});

試したこと②
クライアント側のフォームデータ検証

const email = document.getElementById("email");

email.addEventListener("input", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I am expecting an e-mail address!");
  } else {
    email.setCustomValidity("");
  }
});

どちらもできませんでした...
すみません、教えてくださいm(__)m

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

回答2件

ベストアンサー

jquery.validateは機能とメッセージの拡張ができます

javascript
1<script>
2$.extend(
3  $.validator.messages, {
4  email:"メールアドレスだってばよ！",
5  });
6$.extend($.validator.methods, {
7  "data-validate":function(val,elem){
8    var ret=false;
9    switch($(elem).attr("data-validate")){
10     case "email":
11      var email=$.validator.methods.email;
12      optional=function(){};
13      email.bind(optional);
14      ret= email(val,elem);
15      break;
16     }
17    return ret;
18  },
19});
20$(function(){
21  $("#example-form").validate();
22});
23</script>
24<form id="example-form" action="#" class="">
25<p class="error"></p>
26<input type="email" name="email" placeholder="info@hogehoge.com" id="email" data-validate="email">
27<button type="submit" value="送信">送信</button>
28</form>