Έλεγχος input με jquery χωρίς plugin

[sinikos]

 Καλησπέρα. Έχω μία φόρμα στην οποία, σε μερικά πεδία θέλω να έχω κάποια σταθερή μορφή.

Προσπαθώ με κάποιους περιορισμούς σε html αλλά θέλω πιο άμεσα να γίνεται με jquery. Βρήκα κάποιες λύσεις στο github αλλά πρέπει να κατεβάσω ολόκληρα plugins. Πως μπορώ να το κάνω με κώδικα?

Θέλω δηλαδή σε ένα πεδίο (username) να επιτρέπονται ΜΟΝΟ αγγλικοί πεζοί χαρακτήρες και νούμερα. Ούτε Ελληνικά, ούτε κεφαλαία, ούτε κενά, ούτε ειδικά σύμβολα. Το πεδίο το έχω με oninput και τρέχει μια συνάρτηση που ελέγχω με ajax αν το username έχει ήδη κατοχυρωθεί. Αν έχει κατοχυρωθεί βγάζει σε ένα div "το username δεν είναι διαθέσιμο".

E, πάνω σε αυτό θέλω να προσθέσω και τους παραπάνω περιορισμούς. Δηλαδή άν κάποιος γράψει Ελληνικά, κενό, κεφαλαίο κλπ, απλά να ΜΗΝ γραφτεί στο πεδίο και να του εμφανίσει στο div το μήνυμα "Επιτρεπονται μόνο αγγλικά πεζά γράμματα και νούμερα". Αν συμορφωθεί με τους κανόνες, τότε να τρέξει το ajax για τον έλεγχο του username  στην βάση.

 

[Jordan95]

Καλησπέρα, αν κατάλαβα αυτό που θες να κάνεις σωστά, μπορείς να χρησιμοποιήσεις απλή JavaScript και μια κανονική έκφραση για τον έλεγχο του Username.

Αν θες δοκίμασε αυτό:

    <form id="submit">
      Username:
      <input type="text" id="search" />
      <input type="submit" value="Submit" />
    </form>
    <br />
    <div id="error"></div>

    <script>
      const search = document.getElementById("search");
      const submit = document.getElementById("submit");
      const regEx = /^[a-z0-9]+$/; // RegEx that allows Lowercase Alphanumeric Chars
      const errorMsg = (document.createElement("p").textContent =
        "Please use ONLY Lowercase Alphanumeric Characters!");

      search.addEventListener("keyup", e => {
        // If input is ok, do NOT display error
        if (regEx.test(e.target.value) || e.target.value === "") {
          document.getElementById("error").style = "display:none";
        }

        // If input is invalid, display error
        else {
          document.getElementById("error").innerHTML = errorMsg;
          document.getElementById("error").style = "color: red";
        }
      });

      // On Form Submit
      submit.addEventListener("submit", e => {
        let username = document.getElementById("search").value;
        // If input is invalid, prevent
        if (!regEx.test(username)) {
          e.preventDefault(); // Prevents Form from Submit
          alert(errorMsg);
        }
      });
    </script>

Αν θες κάνε Copy Paste τον κώδικα και δοκίμασέ τον εδώ.

Επεξ/σία 5 Φεβρουαρίου 2019 από Jordan95

[Επισκέπτης]

Δεν χρειάζεσαι jQuery γι αυτό. Απλή JavaScript κι ελέγχεις τις ASCII τιμές για κάθε χαρακτήρα.

[sinikos]

Ευχαριστώ πολύ για τις απαντήσεις σας. Δούλεψε!!!