2009-05-19 12 views
7

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

क्या कोई मुझे सही दिशा में इंगित कर सकता है?

अद्यतन:

यहाँ कुछ कोड

required: function(element) { 
    return($('#chargeamtaddButton').attr('disabled', ? '','disabled'); 
} 

विकलांग विशेषता निर्धारित करने में कि सही/गलत विकल्प झंडा लिए खोज रहे हैं की एक विचार है

+0

Phill, आप अंत में यह बाहर काम किया? क्या आप अपना अंतिम समाधान प्रदान कर सकते हैं? – Blair

+0

@blairyeah - माइकल इरगॉयन – ripper234

उत्तर

-2

मैंने पहले सत्यापन प्लगइन का उपयोग किया है लेकिन मुझे सभी विवरण याद नहीं हैं। मैं बहुत यकीन है कि यह कुछ इस तरह है कर रहा हूँ:

$(function() { 
    $('#myForm').validate(
     rules: { 
      'elementToWatch': { 
       success: function(element) { 
        if($("#myform").validate().element("#myselect")) { 
         $('#chargeamtaddButton:disabled').removeAttr('disabled'); 
        } else { 
         $('#chargeamtaddButton').attr('disabled','disabled'); 
        } 
       }, 
       // etc... 
      }, 
      // etc... 
     }, 
     // etc... 
    }); 
}); 

चूंकि सत्यापन प्लगइन का उपयोग करने के लिए इतने सारे तरीके हैं, तो यह आपको सही सलाह देने के लिए मुश्किल है, लेकिन मुझे आशा है कि मैं क्या दिखाया है आप का एक बेहतर विचार देता है कैसे आगे बढ़ना है। शायद अगर आपने कुछ और कोड और एचटीएमएल दिया है, तो मैं आपको और अधिक मदद कर सकता हूं।

+1

आदमी यह इतना करीब है कि मैं इसे प्राप्त नहीं कर सकता, क्या सफलता नियमों के बाहर होने की आवश्यकता है? –

+0

किसी प्रकार की फोकस घटना के बारे में क्या? –

+1

यह काम नहीं करता है। 'सफलता' विधि 'नियम' विधि के तहत नहीं हो सकती है। साथ ही, पहली बार फॉर्म जमा करने के बाद 'सफलता' विधि केवल फायरिंग शुरू होती है। इसे किसी भी समय फॉर्म पर बदल दिया जाता है, जिसका अर्थ यह है कि अगर आप उस विशिष्ट फ़ील्ड को मान्य करते हैं, तो यह सच हो जाएगा, भले ही आपके फॉर्म पर अन्य फ़ील्ड न हों। यह वर्तमान फ़ील्ड लेबल को बदलने या वर्तमान फ़ील्ड के बारे में एक संदेश जोड़ने के लिए है। मैनुअल में एक साधारण पढ़ने ने इस व्यवहार को समझाया होगा। http://docs.jquery.com/Plugins/Validation/validate –

1

jQuery Validate Plugin Documentation: Form Method

की उपरोक्त विधि वैध प्लगइन आपको यह जांचने की अनुमति देता है कि कोई फॉर्म मान्य है या नहीं। इसलिए यदि आप काम करने के लिए कॉलबैक नहीं प्राप्त कर सकते हैं तो मैं टाइमर चलाऊंगा और यह देखने के लिए जांच करूँगा कि फॉर्म हर बार वैध है या नहीं, और यदि आपका बटन सक्षम है। हालांकि यह बेकार है।

मुझे सत्यापन प्लग के लिए सफलता कॉलबैक नहीं मिल रहा है, इसलिए मुझे लगता है कि आप submitHandler विधि का उपयोग कर फंस गए हैं। हालांकि, आप अभी तक फॉर्म सबमिट करने के लिए तैयार नहीं हैं, क्योंकि आप अभी भी फ़ील्ड जोड़ना चाहते हैं। इसलिए मेरा प्रस्तावित समाधान हर समय ऐड बटन सक्षम कर रहा है, लेकिन यह देखने के लिए क्लिक किया गया कि फॉर्म वैध है या नहीं। यदि ऐसा है, तो अपना फ़ील्ड या व्हाट्नॉट जोड़ें, और यदि नहीं तो त्रुटियों को पॉप अप करें। तो:

<body onload="formValidator = $('#form').validate();"> 
... 
<input value='add' name='add' onclick='addIsValid();'> 
... 
<script type='text/javascript' language='javascript'> 
function addIsValid() { 
    if(formValidator.numberOfInvalids() > 0) { 
      formValidator.showErrors(); 
     } else { 
      addElementToFormOrWhatever(); 
     } 
    } 
</script> 

या कम से कम उस प्रभाव के लिए कुछ। सौभाग्य!

+0

द्वारा उत्तर की जांच करें क्या यह दस्तावेज़.ready या बाहर के अंदर जाता है? –

+0

प्रमाणीकरण प्लग-इन http://docs.jquery.com/Plugins/Validation/Methods/required –

+0

हम्म के लिए एक कॉलबैक है, मैं देखता हूं कि आप क्या करने का प्रयास कर रहे हैं लेकिन यह मेरे पास काम नहीं कर रहा है। मुझे लगता है कि मुझे सत्यापन प्लग-इन –

34

मुझे वास्तव में ऐसा करने का सबसे अच्छा तरीका पता चला है, और यह प्लगइन के भीतर एक अनियंत्रित विधि checkForm() का उपयोग कर रहा है।

इस कोड को अपने फॉर्म के पेज पर $(document).ready() फ़ंक्शन पर जोड़ें।

$('#yourform').bind('change keyup', function() { 
    if($(this).validate().checkForm()) { 
     $('#submitbutton').removeClass('button_disabled').attr('disabled', false); 
    } else { 
     $('#submitbutton').addClass('button_disabled').attr('disabled', true); 
    } 
}); 

इस मामले में, यह बटन के लिए वर्ग button_disabled जोड़ देगा और उसके बाद विकलांग गुण जोड़ें। आप सीएसएस के माध्यम से बटन पर एक अक्षम शैली लागू कर सकते हैं।

+0

हम्म को इसके साथ खेलना होगा, धन्यवाद –

+1

@PhillPafford - क्या यह सही समाधान नहीं है? यह मेरे लिए बेकार ढंग से काम किया। – ripper234

+0

@ ripper234 खुश है कि आपको कुछ ऐसा मिला जो आपके लिए काम करता है –

0

एक और अधिक सुरुचिपूर्ण और तेजी से समाधान पर क्लिक करें और ऑन-KeyUp कोड जोड़ने की घटनाओं आप घटना सुनने

$("#form").validate({ 
    submitHandler: function(form) { 
     form.submit(); 
    }, 
    onkeyup: function(element, event) { 
     if (event.which === 9 && this.elementValue(element) === "") { 
      return; 
     } else if (element.name in this.submitted || element === this.lastElement) { 
      this.element(element); 
     } 

     if (this.checkForm()) { // checks form for validity 
      $('a.submit').attr('class', 'submit btn btn-success');  // enables button 
     } else { 
      $('a.submit').attr('class', 'submit btn btn-danger disabled'); // disables button 
     } 
    }, 
    onclick: function(element) { 
     // click on selects, radiobuttons and checkboxes 
     if (element.name in this.submitted) { 
      this.element(element); 

     // or option elements, check parent select in that case 
     } else if (element.parentNode.name in this.submitted) { 
      this.element(element.parentNode); 
     } 

     if (this.checkForm()) { // checks form for validity 
      $('a.submit').attr('class', 'submit btn btn-success');  // enables button 
     } else { 
      $('a.submit').attr('class', 'submit btn btn-danger disabled'); // disables button 
     } 
    } 
}) 

निम्नलिखित सीएसएस कोड के साथ के रूप में इसके बजाय किसी अन्य को जोड़ने की इस प्रकार की जरूरत है बस डिफ़ॉल्ट ओवरराइड करने के लिए है प्रस्तुत ट्रिगर - आरंभ में अक्षम (3 वर्गों bootstrap):

<a onclick="if(!$(this).hasClass('disabled')) { $('#form').submit(); }" class="submit btn btn-danger disabled">button_save</a> 

यह बहुत आसान केवल करने के लिए jQuery प्लग में areYouSure के साथ प्रयोग किया जा सकता है सक्षम प्रस्तुत जब वास्तविक बदलाव किए जाते हैं:

if (this.checkForm() && $('#form').hasClass('dirty')) { // checks form for validity 

मूक का प्रयोग करने में प्लग आरंभ:

$('#form').areYouSure({'silent':true}); 
संबंधित मुद्दे