jquery - jQuery Validate 插件和默认输入值不起作用

Question

我有一个设置了默认值的表单，应该将其视为“空字段”。我确实看到了有关此主题的另一篇文章，但到目前为止还没有任何工作。它仍然只在字段为空时抛出错误，但当它也有其“默认值”时也应该这样做。

这是具有简单单字段形式的代码：

---

<title>Untitled Document</title>
<form name="contactInfo" action="##" method="post" enctype="multipart/form-data">
<div class="step">
<div style="float:left; width:45%;">
<input type="text" name="email" value="enter your email" tabindex="1" 
onClick="this.select();" required defaultInvalid />
</div>
</div>
<input type="submit" />
</form>
<!--- form validation to handle non blank default fields --->
<script language="javascript" type="text/javascript">
$().ready(function() {
  jQuery.validator.addMethod("defaultInvalid", function(value, element) 
        {
            switch (element.value) 
            {
                case "enter your email":
                    if (element.name == "email") return false;
                    break;
                default: return true; 
                    break;
            }
        });
     // validate the comment form when it is submitted
    $("#contactInfo").validate(
    {
      rules: 
      {
       email: "required defaultInvalid"
      },
      messages: 
      {
       email: "Please input your email."
      }
    });
});
</script>

---

两个问题：

1. 它仅在为空时触发验证错误（而不是在具有默认值时）
2. 我添加的自定义消息不显示。

我已经在 stackOverflow 和网络上搜索了一个小时，但没有找到解决方案。

Answer 1

修复所有错误后效果会更好...

---

1) 表单是目标，id但您form不包含id。因此，.validate()插件从未在您的form.

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

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

---

2）你的规则有点混乱。这是无效的...

rules: { 
    email: "required defaultInvalid"
}

应该...

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

---

3)email现场一片混乱。您无法创建attributes对应于rules.

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

你已经在定义你的rules内部了.validate()。否则，您将使用class="required defaultInvalid".

应该看起来像...

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

我不知道你要做什么，onClick=所以我删除了它。您正在使用 jQuery，因此使用 jQuery，永远不需要任何内联 JavaScript 事件处理程序。

---

工作演示：http: //jsfiddle.net/PPQw8/

通读文档： http ://docs.jquery.com/Plugins/Validation

Answer 2

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

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

并将其与当前值进行比较

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

编辑：

您有一个简单的错误：$("#contactInfo").validate 您的表单没有 ID contactInfo，因此您需要将该 ID 添加到表单标签

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

工作示例：http: //jsfiddle.net/rJVvp/

Answer 3

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

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