次のスクリプトを使用しています。
http://validity.thatscaptaintoyou.com/Demos/index.htm
これは私が使用しているサンプル スクリプトです。
<head>
<title>Simple</title>
<link type="text/css" rel="Stylesheet" href="jquery.validity.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.validity.js"></script>
<script>
$(function() {
$("form").validity(function() {
$("#quantity")
.require()
.match("number");
});
});
</script>
</head>
<body>
<form method="get" action="">
<input type="text" id="quantity" />
<br />
<input type="submit" />
</form>
</body>
</html>
上記は問題ありませんが、メッセージの内容と外観をカスタマイズしたい場合、行き詰まります。
jquery.validity.js は、この変更が行われたファイルであり、91 ～ 95 行目にあるカスタマイズ可能なスニペットを見つけることができました。
// Built-in set of default error messages (for use when a message isn't
// specified):
messages:{
require:"<div style='font-size:25px;'>#{field} is required.</div>",
各入力フィールドの横にこのエラー メッセージを表示する方法と、フィールドごとに異なるメッセージをカスタマイズする方法を教えてください。