Compilare e manipolare array in base ai campi obbligatori compilati

Question

Sto cercando di capire un modo ragionevole per visualizzare e manipolare un array/elenco di campi obbligatori che devono ancora essere compilati in un modulo - questo è solo così che posso produrre questa informazione per l'utente e rimuovere ogni elemento dall'elenco mentre l'utente passa e popola i campi (come una sorta di indicatore di avanzamento). Qualche idea su come gestirlo al meglio?

Sto pensando a qualcosa sulla falsariga di quanto segue:

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

Su evento di input controllare il valore e di conseguenza Aggiungi/Rimuovi elemento in array.

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

Invece di rimuovere le voci, ogni volta che c'è un cambiamento nella immissione dei campi richiesti, si può semplicemente riassegnare il reqFields matrice all'elenco dei campi richiesti con inserimento vuoto.

var reqFields = []; 

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

Answer 3

controllare questo esempio di base muggito utilizzando each su input a scorrere tutti i campi con classe required-entry e verificare le spoglie da aggiungere infine un messaggio per estendersi #msg per informare l'utente quali sono richiesti i campi.

Spero che questo aiuti.

---

$('.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>