1

这是我的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字段中收到错误消息，而它们是可选的。我该如何预防？

4

3 回答 3

1

简单的方法：在电子邮件和URL字段中添加一个igonre类，并在焦点/模糊上删除类/添加类。测试： http ://dl.dropbox.com/u/4017788/Labs/form_validation.html

有关详细信息，请参阅验证选项。

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

焦点 >> this.className = 'url'
模糊 >> this.className = ''

不更改验证调用。

于 2012-10-23T08:14:39.153 回答
0

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

我没有尝试过，但它表明您可以自定义，但不是必需的字段。

于 2012-10-22T18:18:31.507 回答
0

您可以完全使用 HTML5 占位符元素，但测试占位符支持，如果不可用，则对其进行 polyfill，例如

//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>并将它们放置在输入后面，然后在输入集中时隐藏它们可能会更正确/标准/ 有非空值，例如：

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

于 2012-10-22T18:36:42.640 回答