1

カスタムバリデーターで jquery 検証プラグインを使用しています。

エラーメッセージをツールチップとして使用して、フォーカスが表示されるようにしたいと思います。以下のコードはこれを行いますが、フィールドは必須ではないため、値が何もないか、ぼかしのデフォルト値である場合は、エラー メッセージ (ツールヒント) を非表示にする必要があります。

http://jsfiddle.net/Yr4Dw/2/

$.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>
4

0 に答える 0