Question

我有一个设置了默认值的表单，应将其视为＆＃34;空字段＆＃34;。我确实看到了关于这个主题的另一篇文章，但到目前为止还没有能够得到任何工作。它仍然只在字段为空时抛出错误，但是当它具有＆＃34;默认值＆＃34;时应该这样做。同样。

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

<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>

两个问题：

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

我已经搜索了stackOverflow和网络一小段时间而没有任何运气找到解决方案。

Answer 1

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

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 2

It works much better when all the errors are fixed ...

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 3

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

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

jQuery Validate插件和默认输入值无效

3 个答案: