Question

这是我的javascript：

$("#cname, #cemail, #curl, #ccomment").focus(function(){
  if( this.value == this.defaultValue ) {
    $(this).val("");
  }
}).blur(function() {
  if( !this.value.length ) {
    $(this).val(this.defaultValue);
  }
});

$.validator.addMethod("noName", function(value, element) {
return value != element.defaultValue;
}, "Please enter your name.");
$.validator.addMethod("noComment", function(value, element) {
return value != element.defaultValue;
}, "Please enter your comment.");

$("#commentForm").validate();

实际形式：

  <form id="commentForm" action="">
   <p>
     <input id="cname" name="name" size="25" class="required noName" value="Name">
   </p>
   <p>
     <input id="cemail" name="email" size="25" class="email" value="Email">
   </p>
   <p>
     <input id="curl" name="url" size="25" class="url" value="URL">
   </p>
   <p>
     <textarea id="ccomment" name="comment" rows="5" cols="35" class="required noComment">Comment</textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit">
   </p>
 </form>

这是一个测试：http://dl.dropbox.com/u/4017788/Labs/form-validation.html

如果单击“提交”按钮，则会在电子邮件和 URL 字段中显示错误消息，但这些字段是可选的。我该如何预防？

Answer 1

你不能对这两个表单字段使用类'url'和'email'，因为插件将尝试验证它们，因为它们是插件中的“保留”类。我建议为电子邮件和网址字段尝试this之类的操作。

我没试过这个，但它表明你可以自定义，但不是必需的字段。

Answer 2

您可以使用HTML5占位符元素，但测试占位符支持，然后填充它（如果不可用），例如

//test
function placeholderIsSupported() {
    var test = document.createElement('input');
    return ('placeholder' in test);
}
//polyfill
if(!(placeholderIsSupported())) {
  $('[placeholder]').focus(function () {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
      input.removeClass('placeholder');
    }
  }).blur(function () {
    var input = $(this);
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
      input.addClass('placeholder');
      input.val(input.attr('placeholder'));
    }
  }).blur();
  $('[placeholder]').parents('form').submit(function () {
    $(this).find('[placeholder]').each(function () {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
      }
    })
  });

然而，严格来说，你正在做的是为输入提供标签而不是示例值，因此使用元素<label>并将它们放在输入后面可能更正确/标准-y，并且然后在输入聚焦/具有非空值时隐藏它们，例如：

HTML：

<p class="row">
  <label for="name">Name</label>
  <input id="cname" name="name" size="25" class="required noName" value="">
</p>

CSS：

.row {
  position: relative;
}

input,
label {
  display: block
}

label {
  position: absolute;
  /*tweak these until label correctly positioned behind input*/
  top: 0;
  left: 0;
}

input {
  background-color: transparent;
}

input:focus,
input.has-value {
  background-color: #fff; //hide the label behind the bg color when focused or non-empty
}

jQuery的：

//toggle a class depending on whether an input has content or not
input.on('blur', function(){
  var $this = $(this);
  if ($this.val === "") {
    $this.removeClass('has-value');
  }
  else {
    $this.addClass('has-value');
  }
});

第二个选项更具语义性，也更易于访问，因为placeholder的屏幕阅读器支持不完整

Answer 3

简单方法：将 igonre 类添加到电子邮件和 URL 字段，并在focus / blur上添加removeClass / addClass。测试： http://dl.dropbox.com/u/4017788/Labs/form_validation.html

有关详细信息，请参阅validate options。

或者你可以完全摆脱class属性然后：

焦点＆gt;＆gt; this.className ='url'
on blur＆gt;＆gt; this.className =''

而不更改验证通话。

使用默认值验证可选表单字段

3 个答案: