live validation

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

live validation

Δημοσίευση από Serghio » 26 Ιούλ 2013 08:39

θέλω να κάνω live validation στην registration form(όπως στο twitter π.χ).

Η ερώτηση είναι αν προτείνετε να χρησιμοποιήσω κάποιο plugin, και αν ναι ποιό;

Αλλα και "χειροκίνητα" να το κάνω, πως θα το κάνω;

Πως θα γίνει δηλαδή να γίνεται το validation καθώς ο χρήστης πληκτρολογεί κάτι.
Δοκίμασα κάτι τέτοιο αλλά δεν δούλεψε(το παρακάτω είναι ψευδοκώδικας-στερείται ακρίβειας, είναι μόνο και μόνο για να πάρετε μια ιδέα):

if(input.val)
{validate...}

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

live validation

Δημοσίευση από burnmind » 26 Ιούλ 2013 11:48

Σε plugin δε ξέρω τι υπάρχει, αν και υποθέτω πως όλο και κάτι θα είναι διαθέσιμο.

Μια λογική για το πώς θα το φτιάξεις μόνος σου, είναι η εξής:

Σε κάθε field που σε ενδιαφέρει, κάνεις bind κάποιο event που υποδηλώνει πως ο χρήστης έγραψε/έσβησε κάτι (πχ keyup), ότι έφυγε το focus από το element, κλπ. Ό,τι σε βολεύει γι' αυτό που φτιάχνεις.

Ίσως θες να αναγνωρίζεις και τα copy paste, κλπ, αλλά άρχισε με τα πιο απλά προς το παρόν.

Έπειτα, καθώς γράφει ο χρήστης (ανάλογα με τα events που επέλεξες βέβαια), στο εκάστοτε field, εσύ κάνεις το validation σου με τους κανόνες που θέλεις.

Αν για παράδειγμα θέλεις το μέγεθος ενός field να είναι από 5 μέχρι 10 χαρακτήρες, σε κάθε keyup event μέτρα τους χαρακτήρες, και εμφάνισε το μήνυμα που θέλεις.

Αν θα μπλέξεις με ajax requests, καλό θα ήταν να προσέξεις κάποιες λεπτομέρειες που θα σου γλυτώσουν requests. Αν πχ υπάρχει minimum όριο χαρακτήρων στο field, μη στέλνεις request άδικα όσο αυτό το όριο δεν έχει "πιαστεί". Μπορείς επίσης να έχεις ένα μικρό delay στον έλεγχο ώστε να βεβαιωθείς πως ο χρήστης σταμάτησε να γράφει, κλπ.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

live validation

Δημοσίευση από alou » 26 Ιούλ 2013 17:25

Στο κομμάτι που αναφέρει ο burnmind για να γλιτώσεις ajax requests, θα διευκολύνει αυτό:
http://bassistance.de/jquery-plugins/jq ... validation

Είναι σχετικά απλό στη χρήση και δέχεται αρκετή παραμετροποίηση.

Αν πχ στο user name έχεις min 6 μαξ 10 χαρακτήρες, θα περάσεις πρώτα από αυτό το validation και μετά με ajax θα τσεκάρεις αν υπάρχει ήδη το όνομα.

Ένα παράδειγμα γιατί ίσως μπερδευτείς ψάχνοντας:

Κώδικας: Επιλογή όλων

$("#miaForm").validate({
		rules: {
			name: { required: true, minlength: 6, maxlength: 10}
		},
		messages: {
			name: { required: "prepei na grapseis username", minlength: "toulaxiston 6 psifia", maxlength: "megisto 10 psifia" }
		}
	});
Αφού έχεις ορίσει το validate παραπάνω, σε κάποιο event που βολεύει, τσεκάρεις:

Κώδικας: Επιλογή όλων

if ($('input[name="name"]').valid() ) {
...ajax check πχ
}

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

live validation

Δημοσίευση από Serghio » 30 Ιούλ 2013 20:53

θα ήθελα μια αποσαφήνιση για τα ajax requests. Σε κάποιο σημείο αναφέρεται "..για να γλιτώσεις ajax requests".

Μα ένα ajax request δεν γίνεται;
Όταν πατάω το submit button.

Kάτι μου διαφεύγει εδώ.
βεβαια κάποια στιγμή γίνεται λόγος για ένα ajax request που τσεκάρει το username στην βάση(αν υπάρχει ήση δηλαδή).

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

live validation

Δημοσίευση από alou » 31 Ιούλ 2013 00:54

Δεν σου διαφεύγει κάτι, υποθετικά ήταν ο πλυθηντικός (ή τουλάχιστον αυτό ενοούσα εγώ).

Μπορείς να κάνεις ένα ajax request στο τέλος βέβαια και αυτό συνήθως είναι η καλύτερη λύση αλλά υπάρχουν περιπτώσεις που είτε γιατί πρέπει είτε γιατί είναι πιο φιλικό και εύχρηστο, κάνεις επιπλέον ajax requests πριν γίνει submit η φόρμα. Μια τέτοια περίπτωση είναι το username ή πιθανώς το email, που μπορείς να τσεκάρεις πριν γίνει submit η φόρμα την ώρα που το έγραψε.

Οποιοδήποτε input θα μπορούσε / έπρεπε να διασταυρωθεί με στοιχεία της βάσης και αυτό να επηρεάζει την εγκυρότητά του ή τη συμπλήρωση της υπόλοιπης φόρμας, θεωρητικά, θα μπορούσε να αποτελεί και ένα ξεχωριστό ajax request (ή περισσότερα τύπου autocomplete / typeahead).

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

live validation

Δημοσίευση από Serghio » 31 Ιούλ 2013 17:17

alou έγραψε:

Κώδικας: Επιλογή όλων


$("#miaForm").validate({
		rules: {
			name: { required: true, minlength: 6, maxlength: 10}
		},
		messages: {
			name: { required: "prepei na grapseis username", minlength: "toulaxiston 6 psifia", maxlength: "megisto 10 psifia" }
		}
	});

Αυτό το validate που το βρήκες;
Είναι κανά jquery plugin;

Προς το παρόν, αν θέλω να ελένξω αν ο χρήστης έχει συμπληρώσει ένα πεδίο κάνω αυτό:

Κώδικας: Επιλογή όλων


  var name = $("input#name").val();  
        var trimmedname=$.trim(name);
         if (trimmedname === "") 
        {
      $("label#name_error").show();  
      $("input#name").focus();  
      return false;  
        }
Mήπως να χρησιμοποιήσω καλύτερα τον κώδικα που χρησιμοποιείς εσύ;[/code]

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

live validation

Δημοσίευση από alou » 01 Αύγ 2013 08:54

Αφού σου έδωσα το link, ναι jquery plugin είναι. Αν έχεις αρκετά πεδία και θέλεις να κάνεις validate και για άλλα πράγματα, πχ έγκυρο email, min - max αριθμός γραμμάτων κλπ θα σε διευκολύνει αρκετά.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

live validation

Δημοσίευση από Serghio » 01 Αύγ 2013 09:05

ωχ πως δεν το πρόσεξα...sorry

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

live validation

Δημοσίευση από Serghio » 01 Αύγ 2013 13:20

παρατήρησα το εξής με αυτό το validate:

Το μύνημα σφάλματος δεν εμφανίζεται με το που ο χρήστης-πληκρολογώντας- πέσει κάτω ή υπερβεί τον απαιτούμενο αριθμό ψηφίων αλλά εμφανίζεται αφότου κάνω κλικ κάπου(οπουδήποτε) "εξώ" από το σχετικό πεδίο της φόρμας.

Γιατί γίνεται αυτό;

Εκτός αυτού, είναι κάτι που δεν επιθυμώ, καθώς δεν μιλάμε πια για live validation.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

live validation

Δημοσίευση από alou » 01 Αύγ 2013 13:58

Θα πρέπει να ρίξεις μια ματιά, υπάρχει παραμετροποίηση και documentation για το plugin. Χωρίς να δηλώσεις κάτι άλλο, το validate ΠΙΘΑΝΩΣ γίνεται στο on blur, δηλαδή όταν φύγει το focus από το συγκεκριμένο input και όχι στο onkeyup.

Τι ακριβώς έχεις στο μυαλό σου όταν λες live validation? Αυτό το κομμάτι αφορά μόνο το client side validation και είναι όσο live μπορεί να γίνει...

Edit: το default είναι να δουλεύει και στο keyup, για δείξε ακριβώς τη φόρμα που κάνεις validate γιατί κάπου εκεί θα είναι το πρόβλημα μάλλον. Ή ακόμα καλύτερα βάλτη σε ένα fiddle

documentation:
http://jqueryvalidation.org/documentati ... irect%3Dno

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

live validation

Δημοσίευση από Serghio » 01 Αύγ 2013 16:39

Aυτό είναι το link για τον fiddle:
jsfiddle.net/fiddlehunt/rVG2k/5/

Το πρόβλημα εμφαίζεται το ίδιο και εκεί(τόσο στο fiddle που το δοκίμασα όσο και locally)...χρειάζεται να κάνω όμως μια μικρή διόρθωση σε αυτά που έλεγα πριν.

Με το keyup δεν "παίζει" μόνο όταν πάει να πληκτρολογήσει ο χρήστης για πρώτη φορά.
πρέπει να προηγηθεί ένα onblur event δηλαδή για να αρχίζει να παίζει κανονικά.

οπως λέω αυτό το onblur χρειάζεται να γίνει μόνο μια φορά.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

live validation

Δημοσίευση από alou » 01 Αύγ 2013 17:24

Θέλει λίγο πειραματισμό. Παίζοντας και εγώ τώρα, έφτιαξα ένα fn για να γίνεται trigger στο keyup και φαίνεται να δουλεύει σωστά.

Έβαλα και ένα πολύ πρόχειρο παράδειγμα για το handling στο submit, αλλά νομίζω έχει και ένα δικό του submit handler το plugin που ίσως βολεύει να χρησιμοποιήσεις.

http://jsfiddle.net/rVG2k/6/

Κώδικας: Επιλογή όλων

$('#james').validate({
    rules: {
        phone: {
            required: true,
            digits: true,
            minlength: 6,
            maxlength: 10
        }
    },
    messages: {
        phone: {
            required: "prepei na grapseis tilefono",
            minlength: "toulaxiston 6 psifia",
            maxlength: "megisto 10 psifia",
            digits: "μόνο αριθμούς"
        }
    }
});

$('input').on('keyup', function(){ //για να γίνει trigger το validation σε κάθε input. Ρυθμίζεις αναλόγως τα στοιχεία που θες, πχ #someForm input ή input, select, ....
        $("#james").validate().element(this);
});

$('#sendForm').on('click', function(e){
  e.preventDefault();
    if ( $('#james').valid() ) {
        alert('H forma einai valid, ajax gia server side validation & db stuff');
    } else {
         alert('den einai valid ara katse sta auga sou');   
    }
})

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

live validation

Δημοσίευση από Serghio » 01 Αύγ 2013 19:25

έκανες edit τον κώδικα στο fiddle;
Αν ναι, δεν φαίνεται τίποτα εκεί.

Καλό αυτό για τα αυγά.
Ωστόσο θα ήθελα να παραθέσω και τον κώδικα που χρησιμοποιούσα μέχρι τώρα και να μου πεις την άποψη σου-αυτός, κοιτάει μόνο αν ο χρήστης έχει συμπληρώσει τα απαιτούμενα πεδία.
Το λέω αυτό γιατί απλώς θα πρέπει να μπω στον κόπο τώρα να μάθω πως δουλεύει το validate plugin...να ο προγενέστερος κώδικας:΅

Κώδικας: Επιλογή όλων


$(function() {
    $('.error').hide();
     $("#savepersonal").click(function() {
     event.preventDefault(); 
         $('.error').hide();  
       
        var name = $("input#name").val();  
        var trimmedname=$.trim(name);
         if (trimmedname === "") 
        {
      $("label#name_error").show();  
      $("input#name").focus();  
      return false;  
        }
    
     $.ajax({
      type: "POST",
      url: "testajax.php",
      dataType:'text',
      cache:false,
      data:{"name":name,"lastname":lastname,"btype":btype}
      success:function(data){
             if (data==0)
               {$('#personerror').html("Exουμε πρόβλημα!!!");}
                            },
      error:function(jxhr){ 
      alert(jxhr.responseText);} 
        });
      closepersonal();
    return false;
    });
    
  });



alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

live validation

Δημοσίευση από alou » 02 Αύγ 2013 09:27

Δεν ξέρω τι έγινε με το fiddle, δες το εδώ:

http://jsfiddle.net/rVG2k/11/

Αν σε βολεύει αυτό που χρησιμοποιούσες, το κρατάς, αν δε σε καλύπτει κοιτάς την εναλλακτική, εγώ τι να σου πω παραπάνω?

Το function που έχεις πάντως τσεκάρει μόνο αν είναι κενό το πεδίο και αν δεν είναι, καταλήγεις να στέλνεις ajax request.

Αν το κάνεις στο submit και σε καλύπτει απλά να μην είναι κενό, ΟΚ. Αν το κάνεις στο keyup / keydown για να κάνεις το 'live' που ήθελες, είναι φυσικά λάθος.

Αν καταλήξεις σε δικό σου function, γνώμη μου, το function για validation και αυτό για ajax θα πρέπει να είναι ξεχωριστά και να τρέχουν σε διαφορετικά event.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

live validation

Δημοσίευση από Serghio » 02 Αύγ 2013 11:58

alou έγραψε:Δεν ξέρω τι έγινε με το fiddle, δες το εδώ:

http://jsfiddle.net/rVG2k/11/

Αν σε βολεύει αυτό που χρησιμοποιούσες, το κρατάς, αν δε σε καλύπτει κοιτάς την εναλλακτική, εγώ τι να σου πω παραπάνω?

Το function που έχεις πάντως τσεκάρει μόνο αν είναι κενό το πεδίο και αν δεν είναι, καταλήγεις να στέλνεις ajax request.

Αν το κάνεις στο submit και σε καλύπτει απλά να μην είναι κενό, ΟΚ. Αν το κάνεις στο keyup / keydown για να κάνεις το 'live' που ήθελες, είναι φυσικά λάθος.

Αν καταλήξεις σε δικό σου function, γνώμη μου, το function για validation και αυτό για ajax θα πρέπει να είναι ξεχωριστά και να τρέχουν σε διαφορετικά event.
Tώρα βλεπω τις αλλαγές στο fiddle.
Δίκιο έχεις, εγώ θα αποφασίσω τι λύση θα επιλέξω τελικά, απλώς έλεγα μήπως μου έλεγες ένα τρανταχτόυ υπέρ ή κατά για το ένα ή το άλλα οπότε και έτσι θα αποφάσιζα τι θα επέλεγα.

Π.χ δεν μπορώ να καταλάβω με το validate plugin πως θα κάνω να εξαφανίζεται η error class μόλις ο χρήστης πατήσει το cancel button της φόρμας...δεν ξέρω αν γίνεται καν...αν δεν βρω άκρη θα γράψει δικές μου functions

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες