Zorunlu alanlara göre dizi oluştur ve yönet

Question

Henüz bir formda doldurulması gereken zorunlu bir dizi/listeyi görüntülemek ve işlemek için mantıklı bir yol bulmaya çalışıyorum - bu yüzden çıktı verebilirim Kullanıcıya bu bilgi ve kullanıcı her geçtikten sonra listeden kaldırır ve alanları doldurur (bir çeşit ilerleme göstergesi olarak). Bunu nasıl halledebileceğimize dair bir fikrin var mı?

aşağıdaki çizgisinde bir şey düşünüyorum: Giriş olayda

var reqFields = []; 

jQuery('label.required').each(function() { 
    console.log(jQuery(this).text()); 

    reqFields.push(jQuery(this).text()); 
}); 

jQuery('.custom-field').on('input', function() { 
    if (jQuery('.required-entry').filter(function() { 
      return this.value.length === 0; 
     }).length === 0) { 
     // Remove this from the list/array 
    } else { 

    } 
}); 

Answer 1

değerini kontrol ve buna göre ekleme/dizideki öğeyi kaldırmak.

var reqFields = []; 

jQuery('label.required').each(function() { 
    console.log(jQuery(this).text()); 
    reqFields.push(jQuery(this).text()); 
}); 

jQuery('.custom-field').on('input', function() { 
    if (this.value) { 
     // Remove this from the list/array 
     reqFields.splice(jQuery(this).index(),1); 
     // jQuery(this).index() havent tried, else just compute index some other way 
    } else { 
     // add back if cleared out 
     reqFields.push(jQuery('label.required').eq(jQuery(this).index()).text()); 
    } 
}); 

Answer 2

yerine girdileri kaldırılması, gerekli alanların girişinde bir değişiklik yoktur, her zaman, sadece boş girişi olan gerekli alanları listesine reqFields diziyi yeniden atayabilirsiniz.

var reqFields = []; 

jQuery(function() { 
    jQuery('.requiredFields').on('input', function() { 
    reqFields = jQuery('.requiredFields').filter(function() { 
     return this.value.length === 0; 
    }); 
    }); 
}); 

Answer 3

Kontrol nihayet alanlar gereklidir kullanıcıyı bilgilendirmek için #msg span mesajı eklemek için boş olanları sınıfa required-entry ile her alanda döngü input üzerine each kullanarak ve kontrol körüklü bu temel örneği.

Bu yardımcı olur umarım.

---

$('.required-entry').on('input', function() { 
 
    $('#msg').empty(); 
 
    
 
    $('.required-entry').each(function() { 
 
     if ($(this).val().length == 0) 
 
      $('#msg').append('Field <b>'+$(this).prev('label').text()+'</b> is required.<br/>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class='required'>First Name</label> 
 
<input type='text' id='first_name' name='first_name' class='required-entry' required/> 
 
<br/> 
 
<label class='required'>Last Name</label> 
 
<input type='text' id='last_name' name='last_name' class='required-entry' required/> 
 
<br/> 
 
<label class='required'>Email Address</label> 
 
<input type='text' id='email' name='email' class='required-entry' required/> 
 
<hr/> 
 
<br/> 
 
<span id='msg'></span>