Cara mengubah warna pesan error di javascript

Question

:invalid CSS pseudo-class mewakili elemen <form>, <fieldset>, <input> atau <form> lainnya yang isinya gagal untuk divalidasi

Table of Contents Show

Bagaimana cara mengubah warna kesalahan pesan saya?
Bagaimana cara mengubah warna teks input dalam JavaScript?
Bagaimana cara mengubah warna dalam fungsi JavaScript?
Bagaimana cara menyembunyikan pesan kesalahan validasi jquery?

Kelas semu ini berguna untuk menyoroti kesalahan bidang bagi pengguna

:invalid

HTML

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

_

CSS

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

Hasil

Dalam contoh ini kami menggunakan :invalid_ bersama dengan

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

1, penggabung saudara umum, untuk membuat formulir muncul secara bertahap, jadi formulir awalnya menampilkan item pertama yang harus diselesaikan, dan saat pengguna menyelesaikan setiap item, formulir menampilkan item berikutnya. Ketika seluruh formulir selesai, pengguna dapat mengirimkannya

HTML

<form>
  <fieldset>
    <label for="form-name">Name</label><br />
    <input type="text" name="name" id="form-name" required />
  </fieldset>

  <fieldset>
    <label for="form-email">Email Address</label><br />
    <input type="email" name="email" id="form-email" required />
  </fieldset>

  <fieldset>
    <label for="form-message">Message</label><br />
    <textarea name="message" id="form-message" required></textarea>
  </fieldset>

  <button type="submit" name="send">Submit</button>
</form>

_

CSS

/* Hide the fieldset after an invalid fieldset */
fieldset:invalid ~ fieldset {
  display: none;
}

/* Dim and disable the button while the form is invalid */
form:invalid button {
  opacity: 0.3;
  pointer-events: none;
}

input,
textarea {
  box-sizing: border-box;
  width: 100%;
  font-family: monospace;
  padding: 0.25em 0.5em;
}

button {
  width: 100%;
  border: thin solid darkgrey;
  font-size: 1.25em;
  background-color: darkgrey;
  color: white;
}

Hasil

Warna merah biasanya digunakan untuk menunjukkan input yang tidak valid. Orang yang memiliki jenis kebutaan warna tertentu tidak akan dapat menentukan status input kecuali jika disertai dengan indikator tambahan yang tidak bergantung pada warna untuk menyampaikan makna. Biasanya, teks deskriptif dan/atau ikon digunakan

Memahami Kriteria Sukses 1. 4. 1. W3C Memahami WCAG 2. 0

Jika salah satu tombol radio dalam grup adalah

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

2, pseudo-class :invalid diterapkan ke semuanya jika tidak ada tombol dalam grup yang dipilih. (Tombol radio yang dikelompokkan memiliki nilai yang sama untuk atribut

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

4 mereka. )

Secara default, Gecko tidak menerapkan gaya ke kelas semu :invalid. Namun, itu menerapkan gaya ("cahaya" merah menggunakan properti

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

6) ke pseudo-class

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

7, yang berlaku dalam subset kasus untuk :invalid

Bagaimana cara mengubah warna kesalahan pesan saya?

Jika Anda ingin mengubah warna pesan teks kesalahan saja maka tulis seperti label. kesalahan{warna. red;} dan ikuti struktur html di bawah ini . Simpan jawaban ini.

Bagaimana cara mengubah warna teks input dalam JavaScript?

Masukkan Nilai Warna Properti .

Mengubah warna pemilih warna. getElementById("Warnaku"). nilai = "#FF8040";

Dapatkan warna dari color picker. getElementById("Warnaku"). nilai;

Contoh yang menunjukkan perbedaan antara properti defaultValue dan value. getElementById("WarnaKu"); . Nilai default;

Bagaimana cara mengubah warna dalam fungsi JavaScript?

Untuk mengubah warna elemen berdasarkan nilai color picker, kita harus menggunakan event onclick() elemen dan mengubah properti warna CSS sesuai yang dipilih . .