jQuery验证插件和默认输入值不起作用

我有一个设置了默认值的表单，它应该被视为“空字段”。 我确实看到了另一篇关于这个主题的帖子，但到目前为止还没有找到任何有用的东西。 它仍然只在字段为空时抛出错误，但也应该在有“默认值”时抛出错误

以下是带有简单单字段表单的代码：

---

无标题文档
$（）.ready（函数（））{
jQuery.validator.addMethod（“defaultInvalid”，函数（值，元素）
{
开关（元素值）
{
案例“输入您的电子邮件”：
if（element.name==“email”）返回false；
打破
默认值：返回true；
打破
}
});
//提交评论表单时验证该表单
$（“#联系人信息”）。验证(
{
规则：
{
电子邮件：“必需的默认值无效”
},
信息：
{
电子邮件：“请输入您的电子邮件。”
}
});
});

---

两个问题：

它仅在为空时触发验证错误（而不是在具有默认值时）

我添加的自定义消息不显示

---

我在stackOverflow和web上搜索了一个小时，没有找到任何解决方案。

我有自定义逻辑，因此根据您按下的按钮添加规则。您可以在添加规则之前轻松地检查值

$('.buttonNextEmail').click(function () {
   if($(".TextBoxEmail").val() != "default string"){
        $(".TextBoxEmail").rules('add', { required: true });
        $(".TextBoxEmailVerify").rules('add', { required: true });
        $(".TextBoxEmailVerify").rules('add', {
            equalToIgnoreCase: '.TextBoxEmail'
        });
    }
});

---

您可以使用它来获取输入的默认值

var default_value = $(this).prop("defaultValue");

并将其与当前值进行比较

var current_value = $(this).val();

编辑：

您有一个简单的错误：

$（“#contactInfo”）。请验证

您的表单没有ID contactInfo，因此您需要将该ID添加到表单标记中

<form id="contactInfo" name="contactInfo" action="##" method="post" enctype="multipart/form-data">

工作示例：

---

1） 表单被

id

锁定，但您的

表单

不包含

id

。因此，

.validate（）

插件从未在您的

表单上初始化过

<form name="contactInfo" id="contactInfo" ... // <- added an `id`

$("#contactInfo").validate({ ...

应该是

rules: {
    email: {
        required: true,
        defaultInvalid: true
    }
}


3） 
email
字段乱七八糟。您不能创建与
规则
对应的
属性

<input type="text" name="email" value="enter your email" tabindex="1" 
onClick="this.select();" required defaultInvalid />

我不知道你想用
onClick=
做什么，所以我把它删除了。您使用的是jQuery，因此对于jQuery，不需要任何内联JavaScript事件处理程序


工作演示：

通读文档：
我如何将其应用到我目前所拥有的东西上？一个完整的工作示例将非常出色。非常感谢。现在面临着另一个问题。漂亮的字段突出显示和错误消息，现在显示为字段旁边的times字体。ie Normal“validation”在问题字段周围放置一个红色边框，一个消息气泡说“Fill in this field”正在验证空值和默认值，但没有使用默认错误样式。下面是我所说的“默认错误样式”的屏幕截图。我想使用自定义消息，但保留输入字段边框突出显示和消息气泡，上面写着“请填写此字段”。我想这是另一个问题的主题，我对jquery validator不太了解，对不起。他的代码不是“ok”，你错过了
中拙劣的
规则
.validate（）
.OP没有要求提供全新的解决方案。他在问如何用这个插件解决他的问题。
rules: {
    email: {
        required: true,
        defaultInvalid: true
    }
}

<input type="text" name="email" value="enter your email" tabindex="1" 
onClick="this.select();" required defaultInvalid />

<input type="text" name="email" value="enter your email" tabindex="1" />