Passa attraverso tutte le caselle di testo all'interno di una tabella e controlla il valore

Question

Ho una tabella che contiene due caselle di testo (casella di testo 1, casella di testo 2). Entrambe le caselle di testo sono obbligatorie. Se non inserisco il valore nella casella di testo 1 e inserisci il valore textbox2, o viceversa, dovrei ricevere un messaggio di errore. Come possiamo ottenere questo con jQuery?

Answer 1

Il modo più semplice che ho trovato per farlo è quello di aggiungere una classe alla casella di testo come "campo obbligatorio".

<input type="text" class="requiredField" /> 

È quindi possibile ottenere tutti i campi richiesti nella tabella utilizzando la funzione 'trova'.

textboxes = $('#tableid').find('.requiredField'); 

e poi iterare utilizzando il 'ogni' funzione

textboxes.each(function() { 
    if(this.value.length==0){ 
     //do something here 
    } 
} 

con qualcosa come questo di solito di colore il bordo della casella di testo rosso, e aggiungere un avviso per informare l'utente che devono completare tutti i campi richiesti

Ecco il codice finale.

requiredFields = $('#tableid').find('.requiredField'); 
var allFieldsComplete = true; 
requiredFields.each(function(index) { 
    if (this.value.length == 0) { 
     $(this).addClass('requiredIncomplete'); 
     allFieldsComplete = false; 
    } else { 
     $(this).removeClass('requiredIncomplete'); 
    } 
}); 
if(!allFieldsComplete){ 
    alert('Please complete all required fields'); 
} 
return allFieldsComplete; 

Dovrai anche specificare uno stile 'requiredIncomplete' nel tuo CSS. Ciò che questo farà è controllare tutte le caselle di testo nella tabella per vedere se contengono dati. Se una casella di testo non contiene dati, aggiunge la classe 'requiredIncomplete' (che contiene alcuni stili per distinguerla dalle altre caselle di testo), altrimenti rimuove la classe. Restituirà quindi true se tutti i campi contengono dati o false se uno di questi è privo di dati.

Answer 2

$("[id^=textboxid]").each(function(){    
    if ($(this).val().length > 0) { 
     // do something alert ... 
     }     
    } 
); 

questa corsa su tutto textbox che iniziano l'id con textboxid, come textboxid1, textboxid2 ...

Answer 3

Supponendo che in realtà hanno una forma, e vorresti questa convalida al verificarsi sulla presentazione della forma, prima di tutto, aggiungere il vostro messaggio di avviso:

<p class="warning">Both textboxes need to be filled</p> 

Quindi, aggiungere il seguente Javascript

$('form').submit(function(){ 
    var inputValid = true; 

    $('form textarea').each(function(){ 
    if(!this.value){ 
     $('.warning').show(); 
     return false; 
    } 
    }); 
}); 

Ciò comporterà l'invio di tutti i moduli textearea s, visualizzerà il messaggio di errore e annullerà l'invio del modulo se qualsiasi di textarea s nel modulo non viene compilato.

Answer 4

// create a custom jQuery expression filter, called :hasValue 
jQuery.expr[':'].hasValue = function(elem, index, match) { 
    return jQuery(elem).val() !== ''; 
}; 

// textbox logic 
if($('table textbox:hasValue').length !== 2) { 
    alert('error message'); 
} 

Answer 5

Table Table1 = new Table(mainShell,SWT.BORDER); 
    Table1.setHeaderVisible(true); 
    Table1.setLinesVisible(true); 
    TableColumn tc1 = new TableColumn(Table1,SWT.NONE); 
    tc1.setText("Item"); 
    tc1.setWidth(100); 
    TableColumn tc2 = new TableColumn(Table1,SWT.NONE); 
    tc2.setText("Value"); 
    tc2.setWidth(120); 
    TableItem item1 = new TableItem(Table1,SWT.NONE); 
    item1.setText(0, "hahaha"); 
    item1.setText(1, "haha"); 
    Table1.setBounds(9, 174, 228, 128);