添加自定義驗證jQuery插件驗證

Question

我正在使用jQuery插件驗證，我想忽略文本框中的默認值。 我正在jQuery中添加cusotm驗證，如下所示。 但它總是返回false。 誰能幫助我代碼中的問題

$(document).ready(function () {
    $.validator.addMethod("defaultInvalid", function (value, element) {
        switch (element.value) {
            case "First Name":
                if (element.name == "First Name") return false;
        }
    });
    $("#frmReserv").validate({
        rules: {
            FName: "required defaultInvalid",
        },
        messages: {
            FName: "Please Enter Your Name",
        },
    });
});

HTML字段是

<input type="text" value="First Name" name="FName"/>

Answer 1

使用HTML5占位符屬性

<input type="text" placeholder="First Name" name="FName"/>

這樣您就無需檢查默認值。

$("#frmReserv").validate({
        rules: {
                FName: "required",
        },

占位符的Poyfill https://github.com/mathiasbynens/jquery-placeholder

Answer 2

你可以試試看

<input type="text" placeholder="First Name" value="" name="FName"/>

Value =“”將在jquery驗證時檢查

Answer 3

此答案適用於舊版本的IE。

---

這是我過去使用的自定義方法...

jQuery.validator.addMethod("defaultInvalid", function(value, element) {
    return value != element.defaultValue;
});

演示： http : //jsfiddle.net/45J2Q/

---

要在焦點/模糊時自動隱藏/顯示默認文本，請在輸入中添加一個類並使用此類…

$('.autoclear')
.on('focus', function () {
    if ($(this).val() == $(this).prop('defaultValue')) {
        $(this).val("");
    }
})
.on('blur', function () {
    if ($(this).val() == "") {
        $(this).val($(this).prop('defaultValue'));
    }
});

的HTML

<input type="text" value="First Name" name="FName" class="autoclear" />

演示2： http ： //jsfiddle.net/45J2Q/1/