Topic: jQuery

Sveiki,

žaidžiu su jQuery ir iškilo vienas klausimas. Bandau validuoti formas.
žodžiu, tarkim tokia situacija:

input'as vienas, id=1;
input'as antras, id=2;
input'as trečias, id=3;

Norint, kad visus duomenis siųstų validacijai kažką parašius į kurį nors input'ą pagal id naudoju f-ją:

$("#1").change(function() ... })
$("#2").change(function() ... })
$("#3").change(function() ... })

Jeigu taip atskirai viską aprašinėjant labai jau daug kodo gaunasi bent trys atskiri request'ai į server'į, nesunku taip viską apsirašyt, bet galbūt Jum kyla kokių pratiškesnių minčių, kaip įgyvendint šią idėją? :)
Asmeniškai abejoju ar čia galima ką nors gudriau išburti nei naudojant pavienes f-jas, tiesiog įdomios profesionalų mintys šiuo klausimu. :)

Kaip visada dėkoju už pagalbą, kodo gatavo neprašau, reiktų tik pačių idėjų. :)

Re: jQuery

Pirma - yra validavimo pluginai (pvz.: http://docs.jquery.com/Plugins/validation);
Antra - daugumoje atveju validuoti ar duomenys yra tinkamo formato gali padaryt kliento pusėje, nieko nesiunčiant į serverį. į serverį reikia siųsti tokius duomenis, kurie turi būt sulyginami su db/klasifikatoriais;
Trečia - kliento pusėje atliktas validacijas vistiek po kažkokio formos submit'o reikės patikrinti serveryje (-;

Re: jQuery

minde wrote:

Pirma - yra validavimo pluginai (pvz.: http://docs.jquery.com/Plugins/validation);
Antra - daugumoje atveju validuoti ar duomenys yra tinkamo formato gali padaryt kliento pusėje, nieko nesiunčiant į serverį. į serverį reikia siųsti tokius duomenis, kurie turi būt sulyginami su db/klasifikatoriais;
Trečia - kliento pusėje atliktas validacijas vistiek po kažkokio formos submit'o reikės patikrinti serveryje (-;

minde, dėkui už komentarą. :)
Pluginus buvau užmatęs, tiesiog nesinori šių naudoti šiuo metu, noris pačiam išmokt pasirašyt kažką.
Pritaikyt sugeba kas antras durnius, o vat parašyt pats kažką... :)
Bet kokiu atveju, ačiū. ;)
Na taip, sekančius punktus jau žinau. :)
šiuo atveju siunčiu patikrinti vardą ar yra toks laisvas ir captha. :)
Na, o visi simbolių skaičiai bei panašiai atliekami be jokių request'ų, o vėliau submit'inus duomenis dar pakartotinai visus patikrinu ar nėra suklastoti user'io per ajax'ą. :)
čia tuoj pat toks klausimas:
Pavyzdžiui jeigu vardo tikrinimą galima pasiekti ir paprastai jei per ajax'ą post'inu url'u: name.php
Jeigu nenoriu, kad pasiektų vartotojas tiesiogiai dedu:

if (!defined('kazkokia_konstanta')) exit('von..');

Arba naudoju:

if(!isset($_POST['data'])) {
exit;
}

Tačiau dabar kyla toks klausimas, kaip išvengti jog piktas vartotojas nesikreiptų iš savo .html'o formos į tą name.php tikrinti vardo?
Nes name.php atskirai be jokių kitų input'ų validuoja, užtenka tik pateikto aukščiau kodo, kad tikrintų.
Paleidus ciklą:

for($i=0; $i<99999999; $i++) {
post'inam į name.php
}

Turėtų gan neblogai užgrūzint servą? :D
Captha'os tai nedėsi po kiekvienu input'u kurį siunti validuot.. :D
Tai gal reikėtų skirti kažkokį unikalų kodą pačiai form'ai, kuris būtų sukuriamas prisijungus prie saito, tikrinamas post'inant sunaikinimas atsijungus. Tačiau įdėjus į www langą js skriptą vis vien suktų.. nebent būtų galima riboti request'ų skaičių?
Tokie mano samprotavimai šiuo klausimu, turit Jūs kokių? :)

Re: jQuery

siusk i uzklausa ir savo koki sugeneruota koda, o name.php patikrink ar toks yra su session.
Cia vienas is galimu variantu, gali drausti priejima prie name.php failo is .htaccess

Re: jQuery

Kaip ir rašė minde, kas įmanoma validation atlieki kliento pusėje, o ten kur reikia sutikrinti su DB, tai trumpesnis kodas (bent jau aš taip darau) su ajax būtų:

$.ajax({
    type: "POST",
    url: "index.php",
    data: $("form").serialize(),
    success: function(msg){
    window.location.href="index.php"; 
    }
});

Cia nedideli pavyzduka is savo idejau, kur naudoju confirm dialog ir tikrinu formos duomenis. Kas gerai, kad nereikia rasyti visu input pavadinimu. Nurodai tik "form" ir jQuery persiuncia duomenis kur raktai sutampa su formoje esanciais "name" pavadinimais ir priskirtais value. Na o savo php faile toliau unserialize ir t.t. atlieki jau kitus validation...

PHP, MySQLi, Smarty, jQuery, Ajax, Eclipse

Re: jQuery

Protevis wrote:

Kaip ir rašė minde, kas įmanoma validation atlieki kliento pusėje, o ten kur reikia sutikrinti su DB, tai trumpesnis kodas (bent jau aš taip darau) su ajax būtų:

$.ajax({
    type: "POST",
    url: "index.php",
    data: $("form").serialize(),
    success: function(msg){
    window.location.href="index.php"; 
    }
});

Cia nedideli pavyzduka is savo idejau, kur naudoju confirm dialog ir tikrinu formos duomenis. Kas gerai, kad nereikia rasyti visu input pavadinimu. Nurodai tik "form" ir jQuery persiuncia duomenis kur raktai sutampa su formoje esanciais "name" pavadinimais ir priskirtais value. Na o savo php faile toliau unserialize ir t.t. atlieki jau kitus validation...

šaunu!
Gerą idėją davei. :))

7 (edited by qutwala 2011-07-02 06:57:14)

Re: jQuery

Che.. prikeliu seną temą su gan naiviu prašymu.. :))
Turiu problemą su jQueriu, keistuolis siunčia po du ir daugiau post'us.. gal kas nors galėtumėt užmesti akį ir jeigu nesunku pataisyti? (Gi ne daug kartų esu prašęs parašyti kažką gatavo, eh? :D )
Na, o rimčiau jeigu turite kas nors laiko ir noro žvilgtelkite į kodą ir pasakykite kur ko maždaug ko ieškot..
Taigi, pilnas kodas:

    $(document).ready(function()
    {
    
    /****************Duomenu atnaujinimas***********************/
      $('#add').hide();
      var connError = 'Nepavyko prisijungti prie serverio.. Pabandykite perkrauti puslapi (F5) ir meginkite dar karta.';
      var prevent = false;
      var ssId = $('#content').attr('ssId');
      var timer, delay = 3000; //test time..
      //var timer, delay = 300000; //5 min
      timer = setInterval(function(){     
      $.ajax({       
      type: 'POST',       
      url: '1.php',
      data: "?action=check&ssId="+ssId,
      error: function(){
      alert(connError);
      $("#content").addClass('loading');
      clearInterval(timer);//stabdome tolimesni programos veikima..
      $('#add').hide();
      prevent = true;
      return false;
      },
      success: function(data){
      prevent = false;
                }    
            }); 
        }, 
      delay); 
    /****************Duomenu atnaujinimas_END***********************/
    //**************************************************************/
    //**************************************************************/
    /****************Prideti nauja iraša****************************/
        $('table#content th a.add').click(function()
        {
        if(prevent)
        return false
        if(status = $('#add').is(':visible')) {
        $('#add').hide();
        }else{
        $('#add').show();
     /**********************Validacija***************************/
        var submit_name = false;
        var submit_full_name = false;
        var submit_password = false;
        var submit_date = false;
        var submit_phone = false;
        /******************Vardas************************/
        $('#name').change(function() {
        var vardas = $("#name").val();
        var vardas_size =  vardas.length;
        var validate_vardas = vardas.match(/[a-zA-Z0-9]/g);
        var validate = (validate_vardas ? validate_vardas.length : 0);
        if((vardas_size === validate) && (vardas_size >= 4) && (vardas_size <= 8)) {
        $("#content").addClass('loading');
        $.ajax({       
        type: 'POST',       
        url: 'ajax/main.php',
        data: "id=user_check&&"+"name="+vardas+"&&ssId="+ssId,
        error: function(){
        alert(connError);
        $("#content").addClass('loading');
        $('#add').hide();
        prevent = true;
      },
      success: function(responce){
     $("#content").removeClass('loading');
     prevent = false;
      if(responce == 'available') {
      submit_name = true;
      check_class("#name", 'v_error', 'v_ok');
      }else{
      $("#name").addClass('v_error');
      submit_name = false;
                    }    
                }    
            });
        }else{
        $("#name").addClass('v_error');
        submit_name = false;
         }
            });
        }
        /******************Vardas_END********************/
        /******************Pilnas Vardas*****************/
        $('#full_name').change(function() {
        var pilnas_vardas = $("#full_name").val();
        var pilnas_vardas_size =  pilnas_vardas.length;
        var validate_pilnas_vardas = pilnas_vardas.match(/[a-zA-Z0-9]/g);
        var validate = (validate_pilnas_vardas ? validate_pilnas_vardas.length : 0);
        if((pilnas_vardas_size === validate) && (pilnas_vardas_size >= 6) && (pilnas_vardas_size <= 12)) {
        submit_full_name = true;
        check_class("#full_name", 'v_error', 'v_ok');
        }else{
        submit_full_name = false;
        //$("#full_name").addClass('v_error');
        check_class("#full_name", 'v_ok', 'v_error');
        }
        });        
        /******************Pilnas Vardas_END*************/
        /******************Slaptazodis*******************/
        $('#password').change(function() {
        var slaptazodis = $("#password").val();
        var pilnas_vardas_size =  slaptazodis.length;
        var validate_slaptazodis = slaptazodis.match(/[a-zA-Z0-9]/g);
        var validate = (validate_slaptazodis ? validate_slaptazodis.length : 0);
        if((pilnas_vardas_size === validate) && (pilnas_vardas_size >= 6) && (pilnas_vardas_size <= 12)) {
        submit_password = true;
        check_class("#password", 'v_error', 'v_ok');
        }else{
        submit_password = false;
        $("#password").addClass('v_error');
        }
        });
        /******************Slaptazodis_END***************/
        /******************Gimimo data*******************/
        $("select").change(function () { 
        $("#date_years").change(function years() {
        var date_years = $("#date_years").val();
        if(date_years == '0') 
        return false;
            return true;
        });        
        $("#date_month").change(function month() {
        var date_month = $("#date_month").val();
        if(date_month == '0') 
        return false;
            return true;
        });        
        $("#date_day").change(function day() {
        var date_day = $("#date_day").val();
        if(date_day == '0') 
        return false;
            return true;
        });
        var years = years();
        var month = month();
        var day = day();
        var validation = true;
        if((years === false) && (month === true || day === true)) {
        if(years === false) {
        validation = false;
        }
        }
        if ((years === true) && (month === true || day === true)) {
        validation = false;
        }
        if ((years === true) && month === true && day === true) {
        validation = true;
        }
        //alert(validation);
        if(validation === false) {
        submit_date = false;
        $("#date_years").addClass('v_d_error');
        $("#date_month").addClass('v_d_error');
        $("#date_day").addClass('v_d_error');
        }else{
        submit_date = true;
        $("#date_years").removeClass('v_d_error');
        $("#date_month").removeClass('v_d_error');
        $("#date_day").removeClass('v_d_error');
        }
        });
        /******************Gimimo data_END***************/
        /******************Telefono nr*******************/
        $('#telephone').change(function() {
        var telephone = $("#telephone").val();
        var telephone_size =  telephone.length;
        var validate_telephone = telephone.match(/[0-9]/g);
        var validate = (validate_telephone ? validate_telephone.length : 0);
        if((telephone_size === validate) && (telephone_size >= 5) && (telephone_size <= 9)) {
        check_class("#telephone", 'v_error', 'v_ok');
        submit_phone = true;
        }else{
        submit_phone = false;
        $("#telephone").addClass('v_error');
        }
        });
        /******************Telefono nr_END***************/
     /**********************Validacija_END***********************/
        $('#content_clear').click(function() {
        submit = false;
        clear_values("#name", '');
        clear_values("#full_name", '');
        clear_values("#password", '');
        clear_values("#date_years", '0');
        clear_values("#date_month", '0');
        clear_values("#date_day", '0');
        clear_values("#telephone", '');
        });
        $('#content_new').click(function() {
        var submit_validation = false;
        var submit_add = false;
        submit_validation = ($('#name').change() ? true : false);
        submit_validation = ($('#full_name').change() ? true : false);
        submit_validation = ($('#password').change() ? true : false);
        submit_validation = ($('#date_years').change() ? true : false);
        submit_validation = ($('#date_month').change() ? true : false);
        submit_validation = ($('#date_day').change() ? true : false);
        submit_validation = ($('#telephone').change() ? true : false);
        submit_validation = ($('#telephone').change() ? true : false);
        submit_add = (submit_name && submit_full_name && submit_password && submit_date && submit_phone ? true : false);
        if(submit_add) {
        $.ajax({       
        type: 'POST',       
        url: 'ajax/main.php',
        data: "id=add_new&&"+"&&name="+$("#name").val()+"&&full_name="+$("#full_name").val()+"&&password="+$("#password").val()+"&&date_years="+$("#date_years").val()+"&&date_month="+$("#date_month").val()+"&&date_day="+$("#date_day").val()+"&&telephone="+$("#telephone").val()+"&&ssId="+ssId,
        error: function(){
        alert(connError);
      },
      success: function(responcenew){
      alert(responcenew);
      if(responcenew == 'add_success') {
        clear_values("#name", '');
        clear_values("#full_name", '');
        clear_values("#password", '');
        clear_values("#date_years", '0');
        clear_values("#date_month", '0');
        clear_values("#date_day", '0');
        clear_values("#telephone", '');
        $('#add').hide();
        return false;
      }else{
      alert('Ooops.. nepavyko patvirtinti jūsų įvestų duomenų..');
                    }    
                } 
                
            });
        return false; 
                }
                return false; 
            });
            return false; 
        });            
    /****************Prideti nauja iraša_END************************/
    /****************Ištrinti iraša*********************************/
        $('table#content td a.delete').click(function()
        {
        if(prevent)
        return false
            if (confirm("Ar Jus tikrai norite ištrinti ši iraša?"))
            {
                var id = $(this).parent().parent().attr('id');
                var data = 'id=' + id ;
                var parent = $(this).parent().parent();
                

                $.ajax(
                {
                       type: "POST",
                       url: "index.php",
                       data: data,
                       cache: false,
                       error: function(){
                       alert('Nepavyko prisijungti..');
                       $("#content").addClass('loading');
                            },
                       success: function()
                       {
                            parent.fadeOut('slow', function() {$(this).remove();});

                       }
                 });
                 
            }
            return false;
        });
        /****************Ištrinti iraša_END*****************************/
        /****************F-jos******************************************/
            /******************CSS Klases************************/
        function check_class(atribute, class_name, add_class) {
        if($(atribute).hasClass(class_name)) {
        $(atribute).removeClass(class_name);
        $(atribute).addClass(add_class);
        }else{
        $(atribute).addClass(add_class);
            }
        }
        function remove_class(atribute) {
        
        }
        function clear_values(atribute, value) {
        $(atribute).val(value);
        $(atribute).removeClass()
        submit = false;
        }
            /******************CSS Klases_END********************/
        

 });

Dėkui!
Geros dienos. :))

8 (edited by Neodan 2011-07-02 17:39:55)

Re: jQuery

Na su jquery post uzklausu siuntimui dar yra tokia sutrumpinta f-ja $.post(...) (pliusas tame, kad maziau kodo reik rasyti :) ).
Kad siustu tik viena uzklausa, gali:
1. isjungti asynchronini rezima (http://api.jquery.com/jQuery.ajax/).
2. uzsetindamas koki kintamaji, uzdrausti pakartotinai vykditi uzklausa, kol vykdoma nepasibaigs.

9 (edited by qutwala 2011-07-02 10:44:52)

Re: jQuery

Neodan wrote:

Na su jquery post uzklausu siuntimui dar yra tokia sutrumpinta f-ja $.post(...) (pliusas tame, kad maziau kodo reik rasyti :) ).
Kad siustu tik viena uzklausa, gali:
1. isjungti asynchronini rezima (http://api.jquery.com/jQuery.ajax/).
2. uzsetindamas kaki kintamaji, uzdrausti pakartotinai vykditi uzklausa, kol vykdoma nepasibaigs.

Su asynchroniniu jau bandžiau, kažko "spardės" ir nenorėjo veikt.. pasinaudojau antru variantu + request.abort() viskas dabar jau lyg ir čiki. :))
Dėkui, Neodan. :)