web-dev-qa-db-ja.com

JQuery検証：フィールドを赤にする方法

Jqueryとjquery.validate.cs（jQuery Validation Plugin 1.8.0）を使用してフォームを検証しています。現在、フィールドの横に「これは必須フィールドです」というメッセージが表示されます。

また、各フィールドを赤に変えたいです。どうすればいいですか？ありがとう！

jqueryformsvalidation
15
sam

カスタム構成なしで、これを行うことができます：

select.error, textarea.error, input.error {
    color:#FF0000;
}
  • 無効な入力に適用されるデフォルトのクラスはerrorです
  • 検証された入力のデフォルトクラスはvalidです。

これらのクラスはエラーラベルにも適用されるため、CSSを作成する際はそのことに注意してください。

検証プラグイン を使用すると、これらのクラス名を構成できるため、次のようなことができます。

$("form").validate({
   errorClass: "my-error-class",
   validClass: "my-valid-class"
});

.my-error-class {
    color:#FF0000;  /* red */
}
.my-valid-class {
    color:#00CC00; /* green */
}

設定オプションは http://docs.jquery.com/Plugins/Validation/validate にあります

36
Wesley Murch
$("#myform").validate({
   error: function(label) {
     $(this).addClass("error");
   },
});

errorClassパラメータを使用して.invalidクラスを追加します。

input.error {
    color: red;
}
9
Sujit Agarwal

firebugを使用してエラー要素のクラスを確認し、cssを使用して赤にします。

.error-label {
    color: red;
}
1
Stevo

このコードは公式ドキュメントにあります。この例では、間違った入力とそのラベルの両方を強調表示しています。

$("#myform").validate({
   highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
    .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
    .removeClass(errorClass);
  }
});

必要に応じて簡単に変更できます。
詳細なドキュメントはこちら： https://jqueryvalidation.org/validate/#highlight

1
Krivonosov Egor