jQuery - Űrlap érvényesítés

Szerző: Sallai András
Copyright © Sallai András, 2022
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Beszerzés

https://jqueryvalidation.org/

Űrlap

app01/
  `-src/
     |-index.html
     |-signupsub.html
     |-jquery.js
     |-jquery.validate.js
     `-app.js

Adott következő űrlap:

    <h1>Regisztráció</h1>
    <form id="signupForm" action="signupsub.html">
 
        <label for="user">Felhasználónév</label>
        <input type="text" id="user">
        <br>
 
        <label for="email">E-mail</label>
        <input type="email" id="email">
        <br>
 
 
        <label for="pass">Jelszó</label>
        <input type="password" id="pass">
        <br>
 
        <label for="confirm_pass">Jelszó újra</label>
        <input type="password" id="confirm_pass">
        <br>
 
        <button>Regisztrál</button>
    </form>
 
 
    <script src="jquery.js"></script>
    <script src="jquery.validate.js"></script>
    <script src="app.js"></script>

Nézzük meg generált weboldal a böngésző fejlesztő felültén:

F12 > Elements

Betöltjük a jQuery-t, majd az érvényesítőt, utána a saját kódunkat.

Egyszerű használat

Az input elemek számára adjuk meg required, minlength és type attribútumokat. Az érvényesítő ezeket figyeli:

Követelmény:

A jquery-valide submit eseményre reagál.

Ha szeretnénk az űrlapot elküldeni JavaScriptből, a form elemen futtassuk submit() függvényt. Linkek

    <h1>Regisztráció</h1>
    <form id="signupForm" action="signupsub.html">
        <label for="user">Felhasználónév</label>
        <input type="text" id="user"
        required minlength="3">
        <br>
 
        <label for="email">E-mail</label>
        <input type="email" id="email"
        required>
        <br>
 
 
        <label for="pass">Jelszó</label>
        <input type="password" id="pass"
        required minlength="5">
        <br>
 
        <label for="confirm_pass">Jelszó újra</label>
        <input type="password" id="confirm_pass" 
        required minlength="5">
        <br>
 
        <button>Regisztrál</button>
    </form>
 
 
    <script src="jquery-3.6.0.js"></script>
    <script src="jquery.validate.js"></script>
    <script src="app.js"></script>

app.js

$('#signupForm').validate();

Lokalizáció

A localization könyvtárban találunk nyelvi fájlokat. A magyar nyelvhez két fájlt találunk:

messages_hu.js
messages_hu.min.js

A lang attribútum hatástalan, amit választunk, azt használja. Ha többet is megadunk, akkor az utolsó lesz érvényes.

    <script src="jquery-3.6.0.js"></script>
    <script src="jquery.validate.js"></script>
    <script src="localization/messages_hu.js"></script>
    <script src="app.js"></script>

Saját üzenetek

Saját üzenet esetén fontos a „name” attribútum, mert érvényesítő ezt figyeli. A required, minlength ilyen esetben nem lényegesek. Ezeket JavaScript oldalon állítjuk be.

    <h1>Regisztráció</h1>
    <form id="signupForm" action="signupsub.html">
        <label for="user">Felhasználónév</label>
        <input type="text" id="user" name="user">
        <br>
 
        <label for="email">E-mail</label>
        <input type="email" id="email" name="email">
        <br>
 
 
        <label for="pass">Jelszó</label>
        <input type="password" id="pass" name="pass">
        <br>
 
        <label for="confirm_pass">Jelszó újra</label>
        <input type="password" id="confirm_pass" 
        name="confirm_pass">
        <br>
 
        <button>Regisztrál</button>
    </form>
 
 
    <script src="jquery-3.6.0.js"></script>
    <script src="jquery.validate.js"></script>
    <script src="app.js"></script>

app.js

$('#signupForm').validate({
    rules: {
        user: {
            required: true,
            minlength: 3
        },
        email: {
            required: true,
            email: true
        },
        pass: {
            required: true,
            minlength: 5
        },
        confirm_pass: {
            required: true,
            minlength: 5,
            equalTo: "#pass"
        }
    },
    messages: {
        user: {
            required: "Kötelező megadni",
            minlength: "Legalább 3 karatkter"
        },
        email: {
            required: "Kötelező  megadni",
            email: "Csak érvényes email cím lehet"
        },
        pass: {
            required: "A jelszó kötelező",
            minlength: "Legalább 5 karakter"
        },
        confirm_pass: {
            required: "Kötelező",
            minlength: "Minimum 5 karakter",
            equalTo: "A jelszavak nem egyeznek"
        }
    }
});

Apró CSS

Nyissuk meg a böngésző fejlesztői felületét, és nézzük meg a következőket az „Elements” fülön.

Hiba esetén van egy error osztály az input elemeken. Ezt kihasználva írhatunk hozzá CSS-t.

.error {
    border-left: solid 6px red;
}

Ha érvényes az input elem, akkor egy valid osztályunk is van.

.error {
    border-left: solid 6px red;
}
.valid {
    border-left: solid 6px green;
}

NodeJS

npm install jquery
npm install jquery-validation

bs-config.json

{
    "server": [ 
           "src", 
           "node_modules/jquery/dist/",
           "node_modules/jquery-validation/dist/"
           ],
    "port": 8000
}

<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script src="localization/messages_hu.js"></script>