Javascript'te bir sonraki düğmeye tıkladıktan sonra hata durumu nasıl gösterilebilir?

E-posta adresini yazarken hata durumunu gösteriyor.

Bir sonraki düğmeye tıkladıktan sonra hata durumunu göstermem gerekiyor ve ayrıca "daha fazla arkadaş gör" bağlantısını ekledim, "daha fazla arkadaş gör" bağlantısını tıklattığımda belirttim, her bağlantıda bir metin kutusu daha gösterecek.

Şimdi hata durumu sadece ilk 5 metin kutusunu gösteriyor .. ve tıklanan bağlantıdan gelen diğer metin kutularını çalışmadı.

Ama benim jsfiddle bağlantımda "daha fazla arkadaş davet et" bağlantısı işe yaramadı, ama web sayfasında iyi çalışıyor.

javascript:

     $(document).ready(function() {
                        var container = $(document.createElement('div')).css({
            padding: '5px', margin: '0'});

            for (i = 0; i < 4; i++) {
                $(container)
                    .append('<div><input type="text" class="input" id="tb'+i+'" placeholder="Email" /></div>');
                    }    
            $('#main').before(container);   

            $("input", container).keyup(function() {
                    validateEmail($(this));
                });
        var iCnt = 4;        
                function validateEmail(el) {
            if (!isValidEmail($(el).val())) {
        $(el).parent().addClass('invalid');
        return false;
            } else {
        $(el).parent().removeClass('invalid');
        return true;
            }
        }          

    });    

    var divValue, values = '';
    function GetTextValue() {

        $(divValue).empty(); 
        $(divValue).remove(); values = '';
        $('.input').each(function() {
            divValue = $(document.createElement('div')).css({
                padding:'5px', width:'200px'
            });

            values += this.value.trim();
        }
    });

         document.all.contact_list.value = values;            
    }

May i know, what is my mistake, how to fix this? thanks in advance.

0
bu "daha fazla arkadaş davet et" bağlantısı nerede?
katma yazar Rob Scott, kaynak

6 cevap

Vinod'un cevabı doğru, ancak bunu farklı bir yolla yapabilirsiniz:

$("#main").on('keyup', 'input', function() {
    validateEmail($(this));
});

Olan şu ki, henüz sayfada bulunmayan öğeler yaratıyorsunuz ve bu nedenle etkinlik eklenmiyor.

See more on the jQuery on event

Ayrıca bu yanlış:

$(container).append('<input type=text class="input" id=tb' + iCnt + '  placeholder="Email" />');

İkili tırnak kullanmanız gerekir

var id = 'tb' + iCnt;
$(container).append('<input type="text" class="input" id="' + id + '" placeholder="Email" />');
3
katma

Hata, keyup 'ı şöyle kaydetmenizdir:

    $("input", container).keyup(function() {
            validateEmail($(this));
        });

Bu tarz, kendi içinde tamam, ama sorun şu ki bu sadece mevcut olan unsurları etkiliyor. Bunun gibi .on kullanmanız gerekir:

$(outerSelector).on('keyup', innerSelector, function(ev){
   //stuff happens
});

Mesele şu ki, outerSelector 'ın zaten var/var olan element (ler)' e işaret etmesi ve içindeki innerSelector 'a uygun olarak içindeki elementlerin işaret etmemesi gerektiğidir. olayı kaydettiğiniz an.

EDIT: Belirli bir sorunu ele almak

Kemanının böcekleri olduğu için gerçekten test edemiyorum, ama sezgisel olarak, bu değişikliği yapmalısın

container.on('keyup', "input", function(ev){
    validateEmail($(this));
});
2
katma
Ayrıca, saina, Vinod'un cevabı da doğru, ondan() bahsetti ve onu nasıl uygulayabileceğinizi gösterdi.
katma yazar Lajos Arpad, kaynak
@saina, bu soru ile tamamen ilgisiz. Sorunun çözüldüğü keman burada, ancak sizden bu konuda ayrı bir soru sormanızı ve işiniz bittiğinde bir yorum yazmanızı isteyebilir miyim? Ayrıca, hala .on() yanıtının kabul edilen cevaptan daha üstün olduğuna inanıyorum.
katma yazar Lajos Arpad, kaynak
sınava girdikten sonra, basit bir sorunla karşılaştım, daha fazla bağlantıyı tıklatıp varsayılan metin kutusuna geçerli bir e-posta yazıp başka bir metin kutusuna geçersiz e-posta girersem, hata tüm metin kutularını gösterir. Hata durumunu yalnızca geçersiz e-posta veya boş alan için göstermem gerekiyor, bunu nasıl çözeceğimi bilebilirim, burada güncellenmiş bağlantı jsfiddle.net/u75vzjtm/8 teşekkürler
katma yazar pcs, kaynak

Seni doğru anlarsam, senin sorunun doğrulamanın sadece ilk 5 giriş kutusu için çalışması ve dinamik olarak eklenen giriş kutuları için çalışmamasıdır.

Öyleyse, Olay işleyicisini yalnızca başlangıçta bağlamış görünüyorsunuz.

$("input", container).keyup(function() {
    validateEmail($(this));
});

Yapman gereken şey,

...
$('#btAdd').click(function() {
if (iCnt <= 19) {
    iCnt = iCnt + 1;
   //ADD TEXTBOX.
    var newTextbox = $('<input type=text class="input" id=tb' + iCnt + '  placeholder="Email" />');
    $(container).append(newTextbox);
    newTextbox.keyup(function() { //<<<< Bind keyUp for newly created textboxes also.
        validateEmail($(this));
    });
...

Umarım bu sana yardımcı olur.

Düzenle

Öte yandan işleri kolaylaştırmak için $ (selector) .on (); yöntemini kullanabilirsiniz. [@Lajos Arpad tarafından cevaplandı]

for more details refer link

2
katma
@ VinodKumar, cevabını beğenmeye başladım. Yukarı-oy kullandı.
katma yazar Lajos Arpad, kaynak
Çözümün de doğru.
katma yazar Lajos Arpad, kaynak
Hayır, cevabınız doğru, ancak sorunu aşırı derecede zorlaştırıyor. Güvenilir (iyi bir şekilde test edilmiş ve performansa sahip) bir araç tarafından otomatik olarak yapılabilecek bir şeyi işlemek için kod yazdığınızda, hata yapma olasılığını ortaya koyuyorsunuz. Bu yaklaşım felsefi sebeplerden dolayı doğru değildir, bu yüzden ona oy veremiyorum. Doğru, bu yüzden aşağı oy kullanamam. Cevabınızda bunun .on() ile yapılabileceğinden bahsedebilir ve kaputun altında ne olduğunu (fikrinize göre) açıklayabilirseniz, cevabınızın seviyesini önemli ölçüde iyileştirirsiniz.
katma yazar Lajos Arpad, kaynak
Bunun ideal bir çözüm olmadığını düşünüyorum. .Up() öğesini kullanarak bunu otomatik olarak yapma olanağınız varken, keyup olaylarının kaydını el ile işlemeye çalışıyorsunuz. Cevabımı gör.
katma yazar Lajos Arpad, kaynak
@Lajos Arpad, çözümünüz süreci basitleştirir, ancak daha sonra başka öğeler eklenirse, jQuery ana DOM öğenizi dinlemeye başlar. Böylece, elementi nereye eklediğimizi bildiğimiz zaman, olay dinleyicisini kendimiz de ekleyebiliriz. Öyle değil mi? ya da bir şey mi kaçırıyorum?
katma yazar Vinod Kumar, kaynak
Tabii ki ... Lütfen bana ASP kaynağını sağlayın. Sunucu komut dosyası aracılığıyla giriş kutularını dinamik olarak ekler misiniz? Eğer öyleyse, ASP.NET veya ASP mi?
katma yazar Vinod Kumar, kaynak
Küçük bir hata, giriş kutusunu "div" ile içerme özelliğini kaçırdınız. jsfiddle.net/u75vzjtm/9 adresine bakın.
katma yazar Vinod Kumar, kaynak
TAMAM. Tabii, bunu cevabıma ekleyeceğim. Teşekkürler
katma yazar Vinod Kumar, kaynak
Elbette ... bu kod sorununuzu çözmelidir. Devam et ve uygula. "$ ('# BtAdd'). Click (function ()" function (comment line) üzerine bir satır ekledim. Çalışıp çalışmadığını bana bildirin.
katma yazar Vinod Kumar, kaynak
@ VinodKumar: Bana yardım edebilir misin? Teşekkürler..
katma yazar pcs, kaynak
Ama asp haklarına ihtiyacımız yok mu? .. ihtiyacım için, JavaScript ve html için yeterli olduğunu düşünüyorum.
katma yazar pcs, kaynak
@VinodKumar: testten sonra, basit bir sorunla karşılaştım, eğer daha fazla linke tıklarsam ve geçerli metin kutusuna geçerli bir e-posta yazıp başka bir metin kutusuna geçersiz e-posta girersem, hata tüm metin kutularını gösterir. Hata durumunu yalnızca geçersiz e-posta veya boş alan için göstermem gerekiyor, bunu nasıl çözeceğimi bilebilirim, burada güncellenmiş bağlantı jsfiddle.net/u75vzjtm/8 teşekkürler
katma yazar pcs, kaynak
@VinodKumar: Cevabınız için teşekkürler, ama omar cevabı benim için çalışıyor .. teşekkürler
katma yazar pcs, kaynak
keyup() işleviniz benim kodumla aynı mı? Teşekkürler
katma yazar pcs, kaynak
Aslında asp sayfası gibi görünüyor .. ve çok iyi bilmiyorum javascript, yardım edebilir misiniz? Teşekkürler
katma yazar pcs, kaynak

Her key up olayında validasyon giriş kutusudur, yaptığınız hata budur.

Bir sonraki düğmede click olayı girişini onaylamalısınız

11 numaralı satırda aşağıdaki kodu kullanın

$("#nextbutton").click(function() {    
   var inputs=$('.input');
for(i=0;i<inputs.length;i++)
   validateEmail(inputs[i]);
});

düzgün çalışacak

Örnek

1
katma

Bir sonraki düğmeyi onaylamak için tıklayın.

$("input", container).keyup(function() {
     validateEmail($(this));
});

tarafından:

$("#form").submit(function() {
    var inputs=$('.input');
    for(i=0;i<inputs.length;i++)validateEmail(inputs[i]);
    if($('.invalid').length!==0)return false;
});

'Daha fazla arkadaş davet et' bağlantısını yapmak için, etkinlik işleyicisi ekleyin.

$('#btAdd').click(function(){
    $(container).append('<div><input type="text" class="input" id="tb'+($('.input').length+i)+'" placeholder="Email" /> </div>');
});
1
katma
@saina Vinod Kumar çözdü.
katma yazar Omar Elawady, kaynak
Gönderim formundaki e-postaları kontrol etmek için tekrar düzenlendi ve e-posta geçersizse form göndermeyi durdurur. ve onclick = "ValidateEmail ()" tuşunu kaldırın
katma yazar Omar Elawady, kaynak
fiddle tou'nuzda, JS dosyanızın sonunda $ ('document'). ready .just add }); 'daki üst işlev etiketini kapatmıyorsunuz. ve daha fazla arkadaşını davet et
katma yazar Omar Elawady, kaynak
Küçük bir hata, giriş kutusunu "div" ile içerme özelliğini kaçırdınız. jsfiddle.net/u75vzjtm/9 adresine bakın.
katma yazar Vinod Kumar, kaynak

Size yardımcı olabilecek bu kodu deneyin:

        function myfun() {
            var a = document.login.user.value;
            if (a == "" || a == null) {
                alert("u got it");
                return false;
            }
        }

Bu bir DEMO kemanıdır

0
katma