2010-08-31 10 views
5

मेरे पास एक तालिका है जिसमें दो टेक्स्टबॉक्स (टेक्स्टबॉक्स 1, टेक्स्टबॉक्स 2) शामिल हैं। दोनों टेक्स्टबॉक्स अनिवार्य हैं। यदि मैं टेक्स्टबॉक्स 1 में मान दर्ज नहीं करता हूं और मूल्य टेक्स्टबॉक्स 2 दर्ज करता हूं, या इसके विपरीत, मुझे एक त्रुटि संदेश प्राप्त करना चाहिए। हम jQuery के साथ इसे कैसे प्राप्त कर सकते हैं?किसी तालिका के अंदर सभी टेक्स्टबॉक्स के माध्यम से लूप करें और मूल्य

उत्तर

11

मुझे ऐसा करने का सबसे आसान तरीका यह है कि 'आवश्यक फ़ील्ड' जैसे टेक्स्ट को अपने टेक्स्टबॉक्स में जोड़ना है।

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

फिर आप 'ढूंढें' फ़ंक्शन का उपयोग कर तालिका में सभी आवश्यक फ़ील्ड प्राप्त कर सकते हैं।

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

और उसके बाद उन पर पुनरावृति प्रत्येक 'समारोह

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

कुछ इस तरह के साथ मैं आमतौर पर पाठ बॉक्स लाल की सीमा रंग का उपयोग कर, और उपयोगकर्ता बताने के लिए वे पूरा करना होगा एक सूचना जोड़ने सभी आवश्यक फ़ील्ड।

अंतिम कोड यहां दिया गया है।

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; 

आपको अपने सीएसएस में 'आवश्यक अपूर्ण' शैली निर्दिष्ट करने की भी आवश्यकता होगी। यह क्या होगा यह देखने के लिए कि क्या वे डेटा रखते हैं, तालिका में सभी टेक्स्टबॉक्स जांचें। यदि किसी टेक्स्टबॉक्स में डेटा नहीं होता है तो यह 'आवश्यक अपूर्ण' वर्ग को इसमें जोड़ता है (जिसमें अन्य टेक्स्टबॉक्स से इसे अलग करने के लिए कुछ स्टाइल शामिल है), अन्यथा यह कक्षा को हटा देता है। फिर यदि सभी फ़ील्ड में डेटा या गलत होता है तो यह सत्य वापस आ जाएगा यदि उनमें से एक डेटा खो रहा है।

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

सभी पाठ बॉक्स में इस रन कि आईडी textboxid के साथ शुरू, textboxid1, textboxid2 की तरह ...

+0

और आईडी चयनकर्ता वर्ग चयनकर्ता –

1

यह मानते हुए कि आप वास्तव में एक रूप है, और प्रस्तुत करने पर होने के लिये इस मान्यता चाहते हैं तब

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

, निम्नलिखित जावास्क्रिप्ट

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

    $('form textarea').each(function(){ 
    if(!this.value){ 
     $('.warning').show(); 
     return false; 
    } 
    }); 
}); 
में जोड़ें: फार्म, सब से पहले, अपने चेतावनी संदेश में जोड़ने

यह फॉर्म सबमिट करने पर, सभी textearea एस के माध्यम से लूप करेगा, और त्रुटि संदेश प्रदर्शित करेगा, साथ ही के के रूप में फ़ॉर्म सबमिशन को रद्द कर दिया गया है।

+0

की तुलना में तेजी है? आपने 'textarea' –

+0

@ राकेश का उपयोग क्यों किया है क्योंकि जब लोग टेक्स्टबॉक्स कहते हैं तो वे (आमतौर पर) 'textarea' फॉर्म तत्व का जिक्र करते हैं? आप इसके बारे में क्यों पूछेंगे? समाधान 'इनपुट' के साथ भी काम करेगा, इसके लिए चयनकर्ता को थोड़ा सा बदल दें। –

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'); 
} 
0
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); 
संबंधित मुद्दे