Εμφάνιση ειδοποίησης σε ιστοσελίδα όταν ο χρήστης εισάγει μη επιτρεπτούς χαρακτήρες σε <input>

[doctorized]

Θέλω σε μία φόρμα επικοινωνίας να εισάγει ο χρήστης το όνομα και το επώνυμό του σε πεζοκεφαλαία, δηλαδή το πρώτο γράμμα κεφαλαίο και τα υπόλοιπα πεζά, πχ Γεωργίου. Όταν ο χρήστης γράφει μόνο σε κεφαλαία, πχ ΓΕΩΡΓΙΟΥ ή σε αγγλικά, πχ Georgiou ή GEORGIOU, να εμφανίζεται ειδοποίηση κατά την πληκτρολόγηση ότι έχει πληκτρολογήσει μη επιτρεπτούς χαρακτήρες. Αυτό το κάνω γιατί παρόλο που πάνω από το input υπάρχει label που αναγράφει: "Επώνυμο (με ελληνικά πεζά, πχ Γεωργίου)" ο κλασικός Έλληνας γράφει κυριολεκτικά ό,τι μπορείτε να φανταστείτε. Σε δοκιμή που έκανα με JS διαπίστωσα ότι είτε πληκτρολογήσω Α ή α ή στα αγγλικά A ή a, επιστρέφει και στις 4 αυτές περιπτώσεις key code 65. Πώς μπορώ να ξεχωρίσω την πληκτρολόγηση αυτών των χαρακτήρων; Ο κώδικας που έχω είναι απλός:

<input type="text" name="LastName" class="form-control" required onkeydown="CheckIfValid()">
....
<script>
	function CheckIfValid() {
		var evt = window.event;
    		var charCode = (evt.which) ? evt.which : evt.keyCode;	
		console.log(charCode);
	}
</script>

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

Οποιαδήποτε βοήθεια είναι καλοδεχούμενη.

[Kercyn]

Μπορείς να χρησιμοποιήσεις το παρακάτω snippet για να μην επιτρέπεις μη ελληνικούς χαρακτήρες στο input σου:

const inputField = document.getElementById('yourInputFieldId');

inputField.addEventListener('input', function(event) {
  const inputValue = event.target.value;
  const greekRegex = /[Α-Ωα-ωίϊΐόάέύϋΰήώ]/;
  
  if (!greekRegex.test(inputValue)) {
    // Non-Greek character detected, cancel the event
    event.preventDefault();
  }
});

Από κει και πέρα, θα πρέπει να δεις τα παρακάτω:

1. Τι γίνεται αν κάποιος έχει ξένο ονοματεπώνυμο.
2. Γιατί θες να δυσκολέψεις τον χρήστη σου, επιβάλλοντάς του να γράφει όπως τα θες εσύ, αντί να τον αφήσεις να τα γράφει όλα κεφαλαία ή όλα μικρά ή όπως να 'ναι και να τα μετατρέπεις εσύ στο backend σου όπως θέλεις.
3. Αν δε θες να επιτρέπεις ξένα ονοματεπώνυμα, ίσως θα μπορούσες να δεις μια λύση που θα κάνει transliteration on-the-fly. Δηλαδή αν γράψω εγώ D, θα μετατρέπεται αυτόματα σε Δ. Θα χρειαστείς έναν πίνακα που θα αντιστοιχείς τους λατινικούς χαρακτήρες σε ελληνικούς και θα κάνεις τη μετατροπή από εκεί.
4. Το ίδιο μπορείς να κάνεις και για τα πεζά-κεφαλαία. Θα μετατρέπεις on-the-fly το πρώτο γράμμα σε κεφαλαίο και τα υπόλοιπα σε μικρά.
5. Προφανώς θα πρέπει να έχεις και server-side validation στη φόρμα σου, πέρα από τα όσα js validations βάλεις στο front.

EDIT: Κάτι άλλο που θα μπορούσες να κάνεις είναι άμα εντοπίσεις μη ελληνικό χαρακτήρα να βγάζεις ένα εμφανές μήνυμα που να προειδοποιεί τον χρήστη ότι έχει βάλει μη ελληνικούς χαρακτήρες. Μπορεί κάποιος να ξεκινήσει να πληκτρολογεί χαρακτήρες οι οποίοι είναι κοινοί σε Ελληνικά και Λατινικά (όπως το Α ή το Ο), και όταν το καταλάβει να αλλάξει απλώς τη γλώσσα σε Ελληνικά και να συνεχίσει να γράφει, με αποτέλεσμα να έχεις ονόματα με μεικτούς χαρακτήρες (όπως το "Aντωνίου", το 'Α' είναι λατινικό). 

[NikosKallithea]

Ξερεις ο χρήστης δεν θα σκάσει, θα κάνει μια προσπάθεια δεύτερη την τρίτη σε χαιρέτησε 

[doctorized]

27 λεπτά πριν, NikosKallithea είπε

Ξερεις ο χρήστης δεν θα σκάσει, θα κάνει μια προσπάθεια δεύτερη την τρίτη σε χαιρέτησε 

 

1 ώρα πριν, Kercyn είπε

Από κει και πέρα, θα πρέπει να δεις τα παρακάτω:

1. Τι γίνεται αν κάποιος έχει ξένο ονοματεπώνυμο.
2. Γιατί θες να δυσκολέψεις τον χρήστη σου, επιβάλλοντάς του να γράφει όπως τα θες εσύ, αντί να τον αφήσεις να τα γράφει όλα κεφαλαία ή όλα μικρά ή όπως να 'ναι και να τα μετατρέπεις εσύ στο backend σου όπως θέλεις.
3. Αν δε θες να επιτρέπεις ξένα ονοματεπώνυμα, ίσως θα μπορούσες να δεις μια λύση που θα κάνει transliteration on-the-fly. Δηλαδή αν γράψω εγώ D, θα μετατρέπεται αυτόματα σε Δ. Θα χρειαστείς έναν πίνακα που θα αντιστοιχείς τους λατινικούς χαρακτήρες σε ελληνικούς και θα κάνεις τη μετατροπή από εκεί.
4. Το ίδιο μπορείς να κάνεις και για τα πεζά-κεφαλαία. Θα μετατρέπεις on-the-fly το πρώτο γράμμα σε κεφαλαίο και τα υπόλοιπα σε μικρά.
5. Προφανώς θα πρέπει να έχεις και server-side validation στη φόρμα σου, πέρα από τα όσα js validations βάλεις στο front. 

Αυτός ο κώδικας που θέλω να γράψω θα χρησιμοποιηθεί αρχικά σε φόρμες που θα δηλώσει ο άλλος τα στοιχεία του για εισήγηση ή παρακολούθηση συνεδρίου και μετά ίσως χρησιμοποιηθεί σε φόρμα αυτού καθ αυτού επικοινωνίας. Ειδικά στην παρακολούθηση γράφουν ό,τι μακακία τους έρθει. Είναι περιπτώσεις που γράφουν σε greeklish και με λάθη και δεν έχω ιδέα αν είναι άνδρας ή γυναίκα αυτός/αυτή που συμπλήρωσε τη φόρμα. Απευθύνομαι σε Έλληνες που έχουν βγάλει ένα πανεπιστήμιο οπότε θέλω να μου δώσει όνομα και επώνυμο στα ελληνικά και όχι να κάθομαι να μεταφράζω για τον καθένα τους. Έχω ήδη πάνω από 150 άτομα που συμπλήρωσαν τη φόρμα παρακολούθησης (θα ακολουθήσουν κι άλλοι) και δεν έχω το χρόνο να κοιτάω και να εξελληνίζω το όνομα του καθενός. Ούτε έχω το χρόνο να τους στέλνω email (μιας και δηλώνουν το email τους όπου και εκεί ακόμη κάνουν λάθη από απλά όπως "gmai.com" μέχρι πιο σύνθετα) και να ρωτάω ποιο είναι το όνομά τους. Αν είναι να τα παρατήσουν και να μην υποβάλουν τη φόρμα, όπως λέει ο φίλος NikosKallithea, ας μη τη συμπληρώσουν ποτέ. Άλλωστε δεν τους ζητάω κάτι εξωφρενικό, να γράψουν 2 λέξεις, όνομα και επώνυμο, στα ελληνικά. Ας δεχτώ τα κεφαλαία. Αγγλικούς χαρακτήρες δεν μπορώ να δεχτώ γιατί όπως γραφτούν τα στοιχεία έτσι θα εμφανιστούν στη βεβαίωση παρακολούθησης και στη λίστα συμμετεχόντων του συνεδρίου. (Την ημέρα του συνεδρίου θα υπάρχει εκτυπωμένη αλφαβητική λίστα όπου ο καθένας που θα έρχεται θα βρίσκει το όνομά του και θα υπογράφει ότι προσήλθε άρα όποιος έχει γράψει αγγλικά δεν θα το βρίσκει.)

Για ξένους υπάρχει αντίστοιχη σελίδα στα αγγλικά όπου εκεί δεν έχω πρόβλημα.

[Kercyn]

5 hours ago, doctorized said:

Αυτός ο κώδικας που θέλω να γράψω θα χρησιμοποιηθεί αρχικά σε φόρμες που θα δηλώσει ο άλλος τα στοιχεία του για εισήγηση ή παρακολούθηση συνεδρίου και μετά ίσως χρησιμοποιηθεί σε φόρμα αυτού καθ αυτού επικοινωνίας. Ειδικά στην παρακολούθηση γράφουν ό,τι μακακία τους έρθει. Είναι περιπτώσεις που γράφουν σε greeklish και με λάθη και δεν έχω ιδέα αν είναι άνδρας ή γυναίκα αυτός/αυτή που συμπλήρωσε τη φόρμα. Απευθύνομαι σε Έλληνες που έχουν βγάλει ένα πανεπιστήμιο οπότε θέλω να μου δώσει όνομα και επώνυμο στα ελληνικά και όχι να κάθομαι να μεταφράζω για τον καθένα τους. Έχω ήδη πάνω από 150 άτομα που συμπλήρωσαν τη φόρμα παρακολούθησης (θα ακολουθήσουν κι άλλοι) και δεν έχω το χρόνο να κοιτάω και να εξελληνίζω το όνομα του καθενός. Ούτε έχω το χρόνο να τους στέλνω email (μιας και δηλώνουν το email τους όπου και εκεί ακόμη κάνουν λάθη από απλά όπως "gmai.com" μέχρι πιο σύνθετα) και να ρωτάω ποιο είναι το όνομά τους. Αν είναι να τα παρατήσουν και να μην υποβάλουν τη φόρμα, όπως λέει ο φίλος NikosKallithea, ας μη τη συμπληρώσουν ποτέ. Άλλωστε δεν τους ζητάω κάτι εξωφρενικό, να γράψουν 2 λέξεις, όνομα και επώνυμο, στα ελληνικά. Ας δεχτώ τα κεφαλαία. Αγγλικούς χαρακτήρες δεν μπορώ να δεχτώ γιατί όπως γραφτούν τα στοιχεία έτσι θα εμφανιστούν στη βεβαίωση παρακολούθησης και στη λίστα συμμετεχόντων του συνεδρίου. (Την ημέρα του συνεδρίου θα υπάρχει εκτυπωμένη αλφαβητική λίστα όπου ο καθένας που θα έρχεται θα βρίσκει το όνομά του και θα υπογράφει ότι προσήλθε άρα όποιος έχει γράψει αγγλικά δεν θα το βρίσκει.)

Για ξένους υπάρχει αντίστοιχη σελίδα στα αγγλικά όπου εκεί δεν έχω πρόβλημα.

Σου έδωσα τη λύση: transliteration. Κάνεις μια φορά την αντιστοίχιση ελληνικών-λατινικών. Το αν θα βάλει ο άλλος μαλακίες στο όνομά του είναι δικό του θέμα. Δωσ' του τη βεβαίωση με ό,τι έχει γράψει, αυτό είναι δικό του θέμα. Όπως και αν δεν του πάει ποτέ mail επειδή γράφει ό,τι να 'ναι, πάλι δικό του θέμα είναι. Αυτό με τη λίστα δεν το κατάλαβα, δε μπορώ να φανταστώ ποιο είναι το πρόβλημα που δε μπορείς να έχεις και Ελληνικά και Λατινικά. Τέλος πάντων, νομίζω οι λύσεις παραπάνω σε καλύπτουν. Το πόσο θέλεις να προσέξεις το UX είναι δικό σου θέμα.

[k33theod]

10 ώρες πριν, doctorized είπε

Σε δοκιμή που έκανα με JS διαπίστωσα ότι είτε πληκτρολογήσω Α ή α ή στα αγγλικά A ή a, επιστρέφει και στις 4 αυτές περιπτώσεις key code 65.

Είσαι σίγουρος;

 

7 ώρες πριν, doctorized είπε

Είναι περιπτώσεις που γράφουν σε greeklish και με λάθη και δεν έχω ιδέα αν είναι άνδρας ή γυναίκα αυτός/αυτή που συμπλήρωσε τη φόρμα.

Το όνομα δεν προδιαθέτει το φύλλο.