Saya baru-baru menemukan bahwa :invalid
pseudo-class berlaku untuk diperlukan
bentuk unsur-unsur sebagai segera sebagai beban halaman. Misalnya, jika anda memiliki kode ini:
<style>
input:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" required />
Maka halaman akan memuat dengan kosong pink input elemen di atasnya. Setelah validasi dibangun di HTML5 yang lebih besar, tapi aku don't pikir sebagian besar pengguna berharap bentuk untuk memvalidasi sebelum mereka've punya kesempatan untuk memasukkan nilai-nilai apapun sama sekali. Apakah ada cara untuk menunda penerapan pseudo-class sampai acara pertama yang mempengaruhi elemen itu (form submit, blur, mengubah, apa pun's sesuai)? Adalah mungkin untuk melakukan hal ini tanpa JavaScript?
http://www.alistapart.com/articles/forward-thinking-form-validation/
Karena kita hanya ingin menunjukkan bahwa bidang yang tidak valid setelah itu telah fokus, kami menggunakan fokus pseudo-class untuk memicu valid styling. (Tentu, lesu semua bidang yang diperlukan sebagai tidak valid dari awal akan menjadi miskin pilihan desain.)
Mengikuti logika ini, kode anda akan melihat sesuatu seperti ini...
<style>
input:focus:required:invalid {background-color: pink; color: white;}
input:required:valid {background-color: white; color: black; }
<style>
Menciptakan sebuah biola di sini:
Seperti yang anda'd tebak, dan seperti yang anda'll melihat dari biola, teknik ini hanya menunjukkan validasi styling ketika elemen memiliki fokus. Segera setelah anda memindahkan fokus off, styling turun, terlepas dari apakah itu sah atau tidak. Tidak ideal dengan cara apapun.
Hal ini tidak mungkin di CSS murni, tetapi dapat dilakukan dengan JavaScript. Ini adalah sebuah [jQuery contoh](
):// use $.fn.one here to fire the event only once.
$(':required').one('blur keydown', function() {
console.log('touched', this);
$(this).addClass('touched');
});
/**
* All required inputs initially are yellow.
*/
:required {
background-color: lightyellow;
}
/**
* If a required input has been touched and is valid, it should be white.
*/
.touched:required:valid {
background-color: white;
}
/**
* If a required input has been touched and is invalid, it should be pink.
*/
.touched:required:invalid {
background-color: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<label>
Name:
<input type="text" required> *required
</label>
</p>
<p>
<label>Age:
<input type="text">
</label>
</p>
Jawaban-jawaban ini keluar dari tanggal. Sekarang anda dapat melakukan ini dengan memeriksa tempat pseudo-class CSS.
input:not(:placeholder-shown):invalid {
background-color: salmon;
}
form:invalid button {
background-color: salmon;
pointer-events: none;
}
<form>
<input type="email" placeholder="[email protected]" required>
<button type="submit">Submit</button>
</form>
Dimulai dengan latar belakang normal dan berubah warna menjadi pink seperti yang anda masukkan tidak lengkap alamat email ke dalamnya.
Mozilla mengurus hal ini dengan mereka sendiri :-moz-ui-tidak valid pseudoclass yang hanya berlaku untuk bentuk-bentuk setelah mereka've telah berinteraksi dengan. MDN tidak merekomendasikan menggunakan ini karena kurangnya dukungan. Namun, anda dapat memodifikasi untuk Firefox.
Ada's tingkat 4 spec untuk :-pengguna yang tidak valid spec di cakrawala yang akan menawarkan perilaku yang serupa.
Maaf jika ini doesn't membantu, tapi saya berharap ini menawarkan beberapa konteks.
Saya membuat sebuah shim kecil untuk berurusan dengan ini saya codebase. Saya hanya memulai dengan saya <form/>
elemen memiliki novalidate
kamar tersedia data-validasi-pada="blur"
atribut. Ini jam tangan untuk acara pertama dari jenis itu. Dengan cara ini anda masih dapat menggunakan native :invalid
css untuk styling bentuk.
$(function () {
$('[data-validate-on]').each(function () {
var $form = $(this);
var event_name = $form.data('validate-on');
$form.one(event_name, ':input', function (event) {
$form.removeAttr('novalidate');
});
});
});
Ini adalah VanillaJS (tanpa jQuery) versi kzh's jawaban
{
let f = function() {
this.classList.add('touched')
}
document
.querySelectorAll('input')
.forEach((e) => {
e.addEventListener('blur', f, false)
e.addEventListener('keydown', f, false)
})
}
/**
* All required inputs initially are yellow.
*/
:required {
background-color: lightyellow;
}
/**
* If a required input has been touched and is valid, it should be white.
*/
.touched:required:valid {
background-color: white;
}
/**
* If a required input has been touched and is invalid, it should be pink.
*/
.touched:required:invalid {
background-color: pink;
}
<p><label>
Name:
<input type="text" required> *required
</label></p>
<p><label>Age:
<input type="text">
</label></p>
Saat menggunakan validasi form HTML5, cobalah untuk menggunakan browser untuk mendeteksi bagi yang tidak valid kiriman/bidang, bukan re-inventing the wheel.
Mendengarkan tidak valid
acara untuk menambahkan kelas 'tidak valid' untuk membentuk anda. Dengan 'tidak valid' kelas ditambahkan, anda dapat pergi ke kota dengan menata bentuk menggunakan CSS3 :pseudo
penyeleksi.
Misalnya:
// where myformid is the ID of your form
var myForm = document.forms.myformid;
var checkCustomValidity = function(field, msg) {
if('setCustomValidity' in field) {
field.setCustomValidity(msg);
} else {
field.validationMessage = msg;
}
};
var validateForm = function() {
// here, we're testing the field with an ID of 'name'
checkCustomValidity(myForm.name, '');
if(myForm.name.value.length < 4) {
checkCustomValidity(
// alerts fields error message response
myForm.name, 'Please enter a valid Full Name, here.'
);
}
};
/* here, we are handling your question above, by adding an invalid
class to the form if it returns invalid. Below, you'll notice
our attached listener for a form state of invalid */
var styleInvalidForm = function() {
myForm.className = myForm.className += ' invalid';
}
myForm.addEventListener('input', validateForm, false);
myForm.addEventListener('keyup', validateForm, false);
myForm.addEventListener('invalid', styleInvalidForm, true);
Sekarang, hanya gaya formulir anda seperti yang anda lihat cocok berdasarkan 'tidak valid' kelas kami've yang terpasang.
Misalnya:
form.invalid input:invalid,
form.invalid textarea:invalid {
background: rgba(255, 0, 0, .05);
border-color: #ff6d6d;
-webkit-box-shadow: 0 0 6px rgba(255, 0, 0, .35);
box-shadow: 0 0 6px rgba(255, 0, 0, .35);
}
Ada html5 tidak valid
peristiwa kebakaran pada elemen form sebelum submit
peristiwa terjadi untuk masing-masing elemen yang tidak lulus checkValidity. Anda dapat menggunakan acara ini untuk menerapkan kelas misalnya di sekitarnya bentuk dan tampilan :tidak valid gaya hanya setelah peristiwa ini terjadi.
$("form input, form select, form textarea").on("invalid", function() {
$(this).closest('form').addClass('invalid');
});
CSS anda kemudian akan terlihat seperti ini:
:invalid { box-shadow: none; }
.invalid input:invalid,
.invalid textarea:invalid,
.invalid select:invalid { border: 1px solid #A90909 !important; background-color: #EEC2C2; }
Baris pertama menghilangkan default styling, sehingga unsur-unsur bentuk terlihat netral di halaman beban. Segera setelah tidak valid peristiwa kebakaran (ketika pengguna mencoba untuk mengirimkan formulir), unsur-unsur yang tampak diberikan tidak valid.
Cara yang baik adalah untuk abstrak :tidak valid :valid
dengan CSS kelas dan kemudian beberapa JavaScript untuk memeriksa apakah input field terfokus atau tidak.
CSS:
input.dirty:invalid{ color: red; }
input.dirty:valid{ color: green; }
JS:
// Function to add class to target element
function makeDirty(e){
e.target.classList.toggle('dirty');
}
// get form inputs
var inputs = document.forms[0].elements;
// bind events to all inputs
for(let input of inputs){
input.addEventListener('invalid', makeDirty);
input.addEventListener('blur', makeDirty);
input.addEventListener('valid', makeDirty);
}
[DEMO][1]
Anda bisa membuatnya sehingga hanya unsur-unsur yang memiliki kelas tertentu pada mereka dan adalah diperlukan, pink. Menambahkan event handler untuk masing-masing elemen yang diperlukan yang menambahkan bahwa kelas ketika anda meninggalkan elemen.
Sesuatu seperti:
<style>
input.touched:invalid { background-color: pink; color: white; }
input.touched:valid { background-color: white; color: black; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var required = document.querySelectorAll('input:required');
for (var i = 0; i < required.length; ++i) {
(function(elem) {
function removeClass(name) {
if (elem.classList) elem.classList.remove(name);
else
elem.className = elem.className.replace(
RegExp('(^|\\s)\\s*' + name + '(?:\\s+|$)'),
function (match, leading) {return leading;}
);
}
function addClass(name) {
removeClass(name);
if (elem.classList) elem.classList.add(name);
else elem.className += ' ' + name;
}
// If you require a class, and you use JS to add it, you end up
// not showing pink at all if JS is disabled.
// One workaround is to have the class on all your elements anyway,
// and remove it when you set up proper validation.
// The main problem with that is that without JS, you see what you're
// already seeing, and stuff looks hideous.
// Unfortunately, you kinda have to pick one or the other.
// Let non-blank elements stay "touched", if they are already,
// so other stuff can make the element :invalid if need be
if (elem.value == '') addClass('touched');
elem.addEventListener('blur', function() {
addClass('touched');
});
// Oh, and when the form submits, they need to know about everything
if (elem.form) {
elem.form.addEventListener('submit', function() {
addClass('touched');
});
};
})(required[i]);
}
});
</script>
Dan tentu saja, itu tidak't bekerja di IE8 atau di bawah ini, seperti (a) DOMContentLoaded
relatif baru dan tidak't standar ketika IE8 keluar, (b) IE8 menggunakan attachEvent
daripada DOM-standar addEventListener
, dan (c) IE8 isn't akan peduli tentang :diperlukan
lagi pula, itu doesn't secara teknis mendukung HTML 5.
Berikut adalah metode untuk menghindari default styling apapun tidak fokus input tidak valid, anda hanya perlu menambahkan js sederhana perintah onFocus
untuk membiarkan halaman web untuk mengidentifikasi fokus
dan fokus
input, sehingga semua input tidak akan muncul dalam gaya yang tidak valid di tempat pertama.
<style>
input.focused:required:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" class="notfocused" onFocus="document.activeElement.className='focused';" required />
Cobalah sendiri di bawah ini:
input.focused:required:invalid {
background-color: pink;
color: white;
}
input:required:valid {
background-color: darkseagreen;
color: black;
}
<label>At least 1 charater:</label><br />
<input type="text" name="foo" class="notfocused" onFocus="document.activeElement.className='focused';" required />
Saya dapat't komentar, tapi untuk pergi dengan @Carl's sangat berguna jawaban tentang menggunakan :tidak(:placeholder-ditampilkan). Seperti komentar yang lain disebutkan, ini masih akan menunjukkan keadaan yang tidak valid jika anda TIDAK memiliki tempat penampung (seperti beberapa bentuk desain panggilan untuk).
Untuk mengatasi hal ini, cukup tambahkan kosong tempat suka jadi
<input type="text" name="username" placeholder=" " required>
Kemudian CSS anda, sesuatu seperti
:not(:placeholder-shown):invalid{ background-color: #ff000038; }
Bekerja untuk saya!
Berikut dari agouseh's ide, anda dapat memiliki sedikit javascript untuk memberitahu ketika tombol submit telah difokuskan, dan memiliki validasi yang muncul pada waktu itu.
Javascript akan menambah satu kelas (misalnya. submit-focussed
) untuk bentuk lapangan ketika tombol submit difokuskan atau diklik, yang kemudian memungkinkan CSS untuk gaya input yang tidak valid.
Ini mengikuti praktek terbaik untuk menunjukkan validasi umpan balik setelah user selesai mengisi kolom-kolom, karena menurut penelitian tidak ada manfaat tambahan untuk menunjukkan itu selama proses.
document
.querySelector('input[type=submit]')
.onfocus = function() {
this
.closest('form')
.classList
.add('submit-focussed');
};
form.submit-focussed input:invalid {
border: thin solid red;
}
<form>
<label>Email <input type="email" required="" /></label>
<input type="submit" />
</form>
javascript (function($) { $('input[type=submit]').pada('fokus', function() { $(this) .orang tua('bentuk') .addClass('menyerahkan difokuskan'); }); })(jQuery); /* WordPress kompatibel */