jQuery devre dışı düğmesi (Gönder DEĞİL) Benim formda 4 düğmeleri, bir Gönder'i iptal Ekle ve Kaldır düğmesi var + Doğrulama Plugin

Question

doğrular. Tümü beklendiği gibi çalışıyor ancak giriş alanı doğrulanana kadar Ekle düğmesini devre dışı bırakmak istiyorum. Doğrulama eklentisini kullanıyorum ve bunun bir geri çağırma ile gerekli bir doğrulama ile yapılabileceğini düşünüyorum, ancak emin değilim.

birisi bana doğru yönde işaret?

GÜNCELLEME: Burada

engelli Özellik ayarlamak için bu doğru/yanlış seçenek bayrak arıyorsunuz bazı kod

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

bir fikirdir

Answer 1

Doğrulama eklentisini daha önce kullanmıştım ancak tüm ayrıntıları hatırlayamıyorum. Ben böyle bir şey eminim:

doğrulama eklenti kullanmak için bir çok yol vardır yana

$(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... 
    }); 
}); 

, bu size mükemmel tavsiye vermek zor ama ben ne gösterdim size daha iyi bir fikir verir umut nasıl ilerlenir. Belki daha fazla kod ve HTML verdiyseniz, size daha fazla yardımcı olabilirim.

Answer 2

jQuery Validate Plugin Documentation: Form Method

yukarıdaki yöntem Doğrulama eklentisi, bir formun geçerli olup olmadığını kontrol etmenizi sağlar. Bu yüzden eğer geri aramayı işe yaramazsanız, bir zamanlayıcı çalıştırırdım ve formun her sık ​​sık geçerli olup olmadığını kontrol eder ve eğer öyleyse düğmenizi etkinleştiririm. Bu olsa berbat.

ben doğrulama göbeğini bir başarı geri arama bulamıyorum, bu yüzden submitHandler yöntemini kullanarak sıkışmış düşünüyorum. Ancak, hala alan eklemek istediğiniz için henüz formu göndermeye hazır değilsiniz. Bu yüzden önerdiğim çözüm her zaman eklenti düğmesi etkin durumda bırakılıyor, ancak formun geçerli olup olmadığını görmek için tıklandığında bir işlev çağırıyor. Öyleyse, alanınızı veya neyi ekleyeceğinizi ve daha sonra hataları açmayacaksınız. Yani: Ya da en azından bu etkiyle ilgili bir şey. İyi şanslar!

Answer 3

Aslında bunu yapmanın en iyi yolunu keşfettim ve eklenti içinde belgesiz bir yöntem olan checkForm() kullanıyor.

Bu kodu, formun açık olduğu sayfada $(document).ready() işlevine ekleyin.

Bu durumda

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

, bu düğmeye sınıf button_disabled ekleyebilir ve daha sonra engelli niteliğini ekleyecektir. CSS ile düğmeye devre dışı bir stil uygulayabilirsiniz.tıklayın on-ve on-keyUp kod ekleyerek olaylar yerine başka bir ekleme şu şekilde ihtiyaç aşağıdaki css kodu ile olay

$("#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 
     } 
    } 
}) 

dinlemek

Answer 4

daha zarif ve hızlı çözüm basitçe varsayılan geçersiz kılmak için göndermek tetik - ilk (3 sınıfları bootstrap) devre dışı bırakılır: gerçek değişiklikler yapıldığında

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

Bu çok kolay olanak sadece jquery plug-in areYouSure birlikte teslim kullanılabilir:

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

sessiz kullanarak eklenti başlatılırken:

$('#form').areYouSure({'silent':true});