Saya memiliki bentuk yang saya ingin semua field harus diisi. Jika bidang diklik ke dalam dan kemudian tidak diisi, saya ingin menampilkan latar belakang merah.
Berikut ini adalah kode saya:
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});
Ini berlaku peringatan kelas terlepas dari bidang yang sedang diisi atau tidak.
Apa yang saya lakukan salah?
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
}
});
Dan anda don't perlu .panjang
atau melihat jika it's >0
sejak string kosong mengevaluasi ke false sih tapi jika anda'd suka untuk dibaca tujuan:
$('#apply-form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('p').addClass('warning');
}
});
Jika anda're yakin itu akan selalu beroperasi pada textfield elemen maka anda hanya dapat menggunakan ini.nilai
.
$('#apply-form input').blur(function()
{
if( !this.value ) {
$(this).parents('p').addClass('warning');
}
});
Anda juga harus mencatat bahwa $('input:teks')
meraih beberapa elemen, menentukan konteks atau menggunakan ini
kata kunci jika anda hanya ingin referensi untuk sebuah lone elemen (yang disediakan di sana's satu textfield dalam konteks's keturunan/anak-anak).
Semua orang memiliki ide yang tepat, tapi aku ingin menjadi sedikit lebih eksplisit dan memangkas nilai-nilai.
$('#apply-form input').blur(function() {
if(!$.trim(this.value).length) { // zero-length string AFTER a trim
$(this).parents('p').addClass('warning');
}
});
jika anda tidak menggunakan .panjang , maka entri '0' bisa ditandai sebagai buruk, dan sebuah entri dari 5 ruang yang bisa ditandai sebagai ok tanpa $.trim . Terbaik dari Keberuntungan.
Lakukan itu di blur ini terlalu terbatas. Ini mengasumsikan ada fokus pada formulir lapangan, jadi saya lebih memilih untuk melakukannya di submit, dan peta melalui input. Setelah bertahun-tahun menangani mewah blur, fokus, dll. trik, menjaga hal-hal sederhana akan menghasilkan lebih banyak kegunaan di mana itu penting.
$('#signupform').submit(function() {
var errors = 0;
$("#signupform :input").map(function(){
if( !$(this).val() ) {
$(this).parents('td').addClass('warning');
errors++;
} else if ($(this).val()) {
$(this).parents('td').removeClass('warning');
}
});
if(errors > 0){
$('#errorwarn').text("All fields are required");
return false;
}
// do the ajax..
});
anda juga dapat menggunakan..
$('#apply-form input').blur(function()
{
if( $(this).val() == '' ) {
$(this).parents('p').addClass('warning');
}
});
jika anda memiliki keraguan tentang ruang,kemudian mencoba..
$('#apply-form input').blur(function()
{
if( $(this).val().trim() == '' ) {
$(this).parents('p').addClass('warning');
}
});
Keyup event ini akan mendeteksi jika pengguna telah dibersihkan kotak serta (yaitu backspace menimbulkan peristiwa tapi backspace tidak menaikkan menekan tombol acara di IE)
$("#inputname").keyup(function() {
if (!this.value) {
alert('The box is empty');
}});
Pertimbangkan untuk menggunakan jQuery validation plugin sebagai gantinya. Mungkin sedikit berlebihan untuk sederhana bidang-bidang yang dibutuhkan, tetapi cukup dewasa yang menangani kasus tepi anda belum't bahkan berpikir belum (dan tidak akan setiap dari kita sampai kita berlari ke mereka).
Anda dapat menandai kolom yang diperlukan dengan kelas "diperlukan", run a $('bentuk').validate() in $(document).siap() dan's semua yang dibutuhkan.
It's bahkan di-host pada Microsoft CDN juga, untuk pengiriman cepat: http://www.asp.net/ajaxlibrary/CDN.ashx
Ada satu hal lain yang anda mungkin ingin untuk berpikir tentang, Saat ini hanya dapat menambahkan peringatan kelas jika kosong, bagaimana menghapus kelas lagi ketika bentuk tidak kosong lagi.
seperti ini:
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
} else if ($(this).val()) {
$(this).parents('p').removeClass('warning');
}
});
The :kosong
pseudo-selector digunakan untuk melihat jika sebuah elemen tidak mengandung anak-anaknya, anda harus memeriksa nilai :
$('#apply-form input').blur(function() {
if(!this.value) { // zero-length string
$(this).parents('p').addClass('warning');
}
});
Berikut adalah contoh menggunakan keyup untuk input yang dipilih. Menggunakan trim dan juga untuk memastikan bahwa urutan dari karakter ruang putih doesn't memicu truthy respon. Ini adalah contoh yang dapat digunakan untuk memulai pencarian kotak atau sesuatu yang berhubungan dengan jenis fungsi.
YourObjNameSpace.yourJqueryInputElement.keyup(function (e){
if($.trim($(this).val())){
// trimmed value is truthy meaning real characters are entered
}else{
// trimmed value is falsey meaning empty input excluding just whitespace characters
}
}
$(function() {
var fields = $('#search_form').serializeArray();
is_blank = true;
for (var i = 0; i < fields.length; i++) {
// excluded fields
if ((fields[i].name != "locale") && (fields[i].name != "utf8")) {
if (fields[i].value) {
is_blank = false;
}
}
}
if (is_blank) {
$('#filters-button').append(': OFF');
}
else {
$('#filters-button').append(': ON');
}
});
Periksa jika semua bidang yang kosong dan menambahkan ON atau OFF pada Filter_button
Koleksi besar dari jawaban, ingin menambahkan bahwa anda juga dapat melakukan ini dengan menggunakan :placeholder-tampil
CSS selector. Cleaner kecil untuk menggunakan IMO, terutama jika anda're sudah menggunakan jQ dan memiliki penampung di masukan anda.
if ($('input#cust-descrip').is(':placeholder-shown')) {
console.log('Empty');
}
$('input#cust-descrip').on('blur', '', function(ev) {
if (!$('input#cust-descrip').is(':placeholder-shown')) {
console.log('Has Text!');
}
else {
console.log('Empty!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" id="cust-descrip" autocomplete="off" placeholder="Description">
Anda juga dapat menggunakan :valid
dan :invalid
penyeleksi jika anda memiliki masukan yang diperlukan. Anda dapat menggunakan penyeleksi ini jika anda menggunakan atribut yang diperlukan pada input.
<script type="text/javascript">
$('input:text, input:password, textarea').blur(function()
{
var check = $(this).val();
if(check == '')
{
$(this).parent().addClass('ym-error');
}
else
{
$(this).parent().removeClass('ym-error');
}
});
</script>// :)