カスタムバリデーターで jquery 検証プラグインを使用しています。
エラーメッセージをツールチップとして使用して、フォーカスが表示されるようにしたいと思います。以下のコードはこれを行いますが、フィールドは必須ではないため、値が何もないか、ぼかしのデフォルト値である場合は、エラー メッセージ (ツールヒント) を非表示にする必要があります。
$.validator.addMethod("showOnfocus", function(value, element) {
var re = new RegExp(/^([FG]?\d{5}|\d{5}[AB])$/);
return value !== element.defaultValue && re.test(value);
});
$("#myform").validate({
debug: true,
rules: {
field: {
showOnfocus: true
}
},
messages: {
field: {
showOnfocus: "This message will act as a tooltip"
}
},
success: function(label) {
label.text("Good result!");
},
submitHandler: function() {
alert("submitted!");
}
});
//I WOULD LIKE TO THINK SOME OF THIS COULD BE INCLUDED IN THE VALIDATE CODE ABOVE - NOT SURE HOW THOUGH
$("#field").focus(function() {
if ($(this).val() == $(this).prop("defaultValue")) {
$(this).val("");
}
$(this).valid();
});
$("#field").blur(function() {
if ($(this).val() == "") {
$(this).val($(this).prop("defaultValue"));
}
});
$("#field").keyup(function() {
$(this).valid();
});
html:
<form id="myform">
<input class="left" id="field" name="field" value="hello" defaultValue="hello" />
<br/>
<input type="submit" value="Validate!" />
</form>