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クラスを追加し、フォーカス / ブラーの removeClass / addClass を追加します。テスト: http://dl.dropbox.com/u/4017788/Labs/form_validation.html

詳細については、検証オプションを参照してください。

または、 class 属性を完全に削除してから、次のようにすることもできます。

フォーカス時 >> this.className = 'url'
ブラー時 >> this.className = ''

検証呼び出しを変更せずに。

于 2012-10-23T08:14:39.153 に答える
0

これらの 2 つのフォーム フィールドにクラス「url」と「email」を使用することはできません。これは、プラグインで「予約済み」クラスであるため、プラグインがそれらを検証しようとするためです。email フィールドと url フィールドの両方で、このようなことを試してみることをお勧めします。

私はこれを試していませんが、カスタムはできるが必須フィールドではないことを示唆しています。

于 2012-10-22T18:18:31.507 に答える
0

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>して入力の後ろに配置し、入力がフォーカスされているときにそれらを非表示にする方がおそらく正しい/標準的です。 / 空でない値を持ちます。例:

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この 2 番目のオプションは、スクリーン リーダーのサポートが不完全であることを考えると、よりセマンティックでアクセスしやすいものです。

于 2012-10-22T18:36:42.640 に答える