[[oktatas:web:jquery|< jQuery]]

====== jQuery - Űrlap érvényesítés ======
  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Beszerzés =====

  * https://jqueryvalidation.org/


===== Űrlap =====

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



Adott következő űrlap:

<code html>
    <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>  
</code>


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
  * https://api.jquery.com/submit/
  * https://www.w3schools.com/jsref/met_form_submit.asp

<code html>
    <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>
</code>


<code javascript app.js>
$('#signupForm').validate();
</code>

==== 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.
<code html>
    <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>
</code>

===== 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.

<code html>
    <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>
</code>


<code javascript 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"
        }
    }
});
    

</code>

===== 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.


<code css>
.error {
    border-left: solid 6px red;
}
</code>


Ha érvényes az input elem, akkor egy valid osztályunk is van.
<code css>
.error {
    border-left: solid 6px red;
}
.valid {
    border-left: solid 6px green;
}
</code>

===== NodeJS =====

  npm install jquery
  npm install jquery-validation


<code javascript bs-config.json>
{
    "server": [ 
           "src", 
           "node_modules/jquery/dist/",
           "node_modules/jquery-validation/dist/"
           ],
    "port": 8000
}
</code>

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