jQuery sorgulama: Yeni pageload olmadan mesaj iletirken

1 Cevap php

Bu sorunun beceriksizlik affet, ben dürüst nasıl ifade daha iyi bir sorgu bilmiyorum ...

Durum:

Ben yükseltme sürecinde kulüpler bir xhtml / php sayfası içinde temel bir iletişim formu var. Geçenlerde bu sayfada yeni ilgisiz jquery eklentisi eklendi, bu yüzden bazı basit form doğrulama mümkünse yardımcı olmak için jquery işlevini kullanmak istiyorum. Doğrulama zaten iletişim formu ile gönderilen ayrı bir dosyada PHP ile yapılıyor.

PHP doğrulama iletisi yeni bir pageload olmadan geri ana (iletişim formu) sayfasına geçirilecek için ben ne istiyorum, ne olduğunu. Ben bir yerde jquery vasıtasıyla yapılır bu gördüm, ama ben burada ya da google üzerinden tekrar bulmak için görünmüyor olabilir. Herkes yardımcı olabilir?

Gerçekten burada hız ve basitlik arıyorum, ve ilk bakışta, jquery doğrulama eklentisi büyüklüğü ve karmaşıklığı zor olduğunu, bu yüzden söz konusu güzergah üzerinde girişmek loath ...

1 Cevap

Aradığınız Ne AJAX olarak bilinen ve bu konuda zor bir şey, özellikle jQuery ile, var olduğunu! Javascript her şeyin yolunda olup olmadığını görmek için sunucuya bir istekte süre formu asmak gerekir - doğrulamak için PHP veri gönderme ile sorun hemen "hız" için gereksinimi nix olduğunu ifade etti. Bu nedenle, bu doğrulama both sunucu ve istemci tarafında yapılması için ortak bir uygulamadır. Eğer always sunucuda verileri doğrulamak gerektiği gibi ben, hem de söylüyorum unutmayın.

Bu düşünceyle, başlayalım! Ben doğrulama eklentisi kullanmadan bir form doğrulamak için nasıl göstermek için gidiyorum - büyük projeler için, bunu dikkate almak isteyebilirsiniz, ama o olmadan yeterince kolaydır:

<form id='myform' action='whatever.php' method='POST'>
First Name: <input type='text' name='first_name' class='required'><br>
Last Name: <input type='text' name='last_name'><br>
Email: <input type='text' name='email' class='required'><br>
Zip: <input type='text' name='zip'><br>
</form>

Gördüğünüz gibi biz gerekli bir sınıf ile birinci isim ve e-posta var, bu yüzden biz bunu yapabilirsiniz:

$(function() { // wait for the document to be loaded
    $('#myform').submit(function() {
        var valid = true; // assume everything is okay
        // loop through each required field in this form
        $('input.required', this).each(function() {
            // if the field is empty, mark valid as false
            // and add an error class
            if($.trim($(this).val()) == '') {
                valid = false;
                $(this).addClass('error_input');
            }
        });

        // additional validation for email, zip, perhaps

        return valid; // if valid is true, continue form submission
    });
});

Doğrulama eklentisi bu biraz kıvrımlara ve temiz yapmak için yapar, ama sadece hızlı bir form yapmak gerekiyorsa yukarıdaki yaklaşımı ile yanlış bir şey yok. Eğer iki yerde doğrulama kuralları olmak zorunda çünkü emmek yok, ancak kullanıcıların yanlış bir şey çabuk anlatmak isterseniz ayrı sunucuda Javascript yürütme veya veri için sunucuyu aramanın hiçbir alternatif yoktur.

Umarım bu yardımcı olur.

EDIT: Ben sorunuzu yanlış görünüyor. Eğer bir PHP komut dosyası için form verilerini geçmek istiyorsanız, bu değerleri doğrulamak ve geri başarı ya da bir yük olmadan geri sayfa hatası var, böyle bir şey yapardı:

$('#myform').submit(function() {
    // allow submit if we've validated this already
    if($(this).data('done')) return true;
    var data = $(this).serialize(); // serialize the form data
    // you could get the two variables below from the actual form (DRY)
    // with $(this).attr('action'); and $(this).attr('method'); but I am
    // not sure if that is what you want...
    var action = 'validate.php'; // what script will process this
    var method = 'POST'; // type of request to make
    $.ajax({
        type: method,
        url: action, 
        data: data,
        dataType: 'json',
        success: function(d) {
            if(d.code == 'success') {
                 // everything went alright, submit
                 $(this).data('done', true).submit();
            } else {
                 alert('something is wrong!');
            }
        }
    });
    return false; // don't submit until we hear back from server   
});

Ve sonra PHP komut yapmak için sahip olduğu tüm json_encode , her şeyin yolunda olup olmadığını belirtmek için kullanarak, böyle bir şey return:

// verify everything...
// data will be in $_POST just like a normal request
if($everythingOK) {
    $code = 'success';
} else {
    $code = 'error';
}
print json_encode(array('code' => $code));
exit;

Ben yukarıda Javascript test değil, ama ben bu konuda doğru olmalıdır eminim. I this yardımcı olur umarım. :)