Jednostavan primer validacije forme preko javascripta

Baby Yoda

Baby Yoda

Contributor
Poruka
21.753
Najjednostavniji primer validacije forme preko JS-a.

HTML:
HTML: 
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Assignment 2 - Website Building</title>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   <body>
      <div id="login-container">
         <form onsubmit="return false">
            <div>
               <label for="username">Username:</label>
               <input id="username" type="text" >
               <span id="done" class="material-icons"></span>
            </div>
            <div>
               <label for="password">Password:</label>
               <input id="password" type="password">
               <span id="wrong" class="material-icons"></span>
            </div>
            <input type="submit" value="Login" onclick='validate();'>
         </form>
         <p id="userInfo"></p>
         <p id='passInfo'></p>
      </div>
   </body>
</html>

CSS:
CSS: 
 body {
                box-sizing: border-box;
                font-family: sans-serif;
            }
           
            @use "@material/textfield/icon";

            @include icon.icon-core-styles;
           
            #login-container {
                width: 460px;
                margin: 0 auto;
            }

            form label,
            form input {
                width: 100%;
                box-sizing: border-box;
            }

            form input {
                padding: 8px;
            }

            form label {
                font-weight: bold;
            }

            form div {
                margin: 16px 0px;
            }
            form span {
            position:absolute;
            margin-top:5px;
            margin-left:-30px;
            }

javascript:
JavaScript: 
// Valid login data
let validUser = 'new_user';
let validPass = '123456789';

// Form elements
let username = document.getElementById('username');
let password = document.getElementById('password');

// Notifications
let userInformation = document.getElementById('userInfo');
let passInformation = document.getElementById('passInfo');
let done = document.getElementById('done');
let wrong = document.getElementById('wrong');

function validate() {

    // Get values from input fields for username and password
    let user = username.value;
    let pass = password.value;
    let userInfo = userInformation;
    let passInfo = passInformation;


    if (user === '') {
        userInfo.innerHTML = "please, enter username";
        done.innerHTML = 'close';
    } else {
        if (user == validUser) {
            username.style.borderColor = 'lightgreen';
            done.innerHTML = 'done';
            userInfo.innerHTML = '';
        } else {
            username.style.borderColor = 'red';
            done.innerHTML = 'close';
            userInfo.innerHTML = 'please, enter valid username';
        }
    }

    if (pass === '') {
        passInfo.innerHTML = "please, enter password";
        wrong.innerHTML = 'close';
    } else {
        if (pass == validPass) {
            password.style.borderColor = 'lightgreen';
            wrong.innerHTML = 'done';
            passInfo.innerHTML = '';
        } else {
            password.style.borderColor = 'red';
            wrong.innerHTML = 'close';
            passInfo.innerHTML = 'please, enter valid password';
        }
    }

}

JS fiddle:
https://jsfiddle.net/CodeIllusionist/nmqjvpd6/3/

Validan username je: new_user
Validna lozinka je: 123456789
 
Baad_Boy:
Ne nego slazem se. Moglo je drugacije jos jednostavnije ali ovako je lakse i brze. 🙂
Kliknite za proširenje...
Lakše je ukloniti ceo CSS i ostaviti formu oguljenom. Napisati što kraći JS, ali totalno nerazuman za početnike. To sam mogao uraditi. A evo mogu malo kasnije to i da uradim, čisto da upišem šale radi. Izmeniću samo JS fajl na kraći način. :mrgreen:
 
Baad_Boy:
Salim se ja nemam pojma programiranje.

Da li si ulazio nekada u Onu firmu kako bese Nordius? San snova. Liftovi kao u igrici. A svuda po zidovima napisane ideje za igrice. Plate su najvece u Srbiji, najjaca kompanija.bio sam tamo nesto poslovno, kao radnik ne kao direktor. 🤘
Kliknite za proširenje...
Sve sam natrpao zajedno pa iako je ružno i nečitko, nema veze. :mrgreen:
JavaScript: 
function validate() {

    if (document.getElementById('username').value === '') {
        document.getElementById('userInfo').innerHTML = "please, enter username";
        document.getElementById('done').innerHTML = 'close';
    } else {
        if (document.getElementById('username').value == 'new_user') {
            document.getElementById('username').style.borderColor = 'lightgreen';
            document.getElementById('done').innerHTML = 'done';
            document.getElementById('userInfo').innerHTML = '';
        } else {
            document.getElementById('username').style.borderColor = 'red';
            document.getElementById('done').innerHTML = 'close';
            document.getElementById('userInfo').innerHTML = 'please, enter valid username';
        }
    }

    if (document.getElementById('password').value === '') {
        document.getElementById('passInfo').innerHTML = "please, enter password";
        document.getElementById('wrong').innerHTML = 'close';
    } else {
        if (document.getElementById('password').value == '123456789') {
            document.getElementById('password').style.borderColor = 'lightgreen';
            document.getElementById('wrong').innerHTML = 'done';
            document.getElementById('passInfo').innerHTML = '';
        } else {
            document.getElementById('password').style.borderColor = 'red';
            document.getElementById('wrong').innerHTML = 'close';
            document.getElementById('passInfo').innerHTML = 'please, enter valid password';
        }
    }
}

Nisam ulazio u Nordus.
 
Baby Yoda:
Sve sam natrpao zajedno pa iako je ružno i nečitko, nema veze. :mrgreen:
JavaScript: 
function validate() {

    if (document.getElementById('username').value === '') {
        document.getElementById('userInfo').innerHTML = "please, enter username";
        document.getElementById('done').innerHTML = 'close';
    } else {
        if (document.getElementById('username').value == 'new_user') {
            document.getElementById('username').style.borderColor = 'lightgreen';
            document.getElementById('done').innerHTML = 'done';
            document.getElementById('userInfo').innerHTML = '';
        } else {
            document.getElementById('username').style.borderColor = 'red';
            document.getElementById('done').innerHTML = 'close';
            document.getElementById('userInfo').innerHTML = 'please, enter valid username';
        }
    }

    if (document.getElementById('password').value === '') {
        document.getElementById('passInfo').innerHTML = "please, enter password";
        document.getElementById('wrong').innerHTML = 'close';
    } else {
        if (document.getElementById('password').value == '123456789') {
            document.getElementById('password').style.borderColor = 'lightgreen';
            document.getElementById('wrong').innerHTML = 'done';
            document.getElementById('passInfo').innerHTML = '';
        } else {
            document.getElementById('password').style.borderColor = 'red';
            document.getElementById('wrong').innerHTML = 'close';
            document.getElementById('passInfo').innerHTML = 'please, enter valid password';
        }
    }
}

Nisam ulazio u Nordus.
Kliknite za proširenje...
Nista ja ne kapiram. Znam da su sve neke komande ili funkcije valjda mozda ali nznm nista 😄
 
MisliM_StvaRnO:
Od kako sam presao na React.js jezim se kad vidim kod od 50 linija samo za validaciju da ne pricam o duzini svake linije.
Dobro je za vezbanje samog js-a ali valja ici na neku biblioteku posle pa makar i jQuery ako nista drugo.
Kliknite za proširenje...
Važno je razumeti osnove. Kod je dug, slažem se, ali je vanilla js. Meni je neobično da neko uči Angular ili React i jQuery, a da ne zna vanilla js.
 
Bren:
Jeste, slažem se ali ja sam učio React i jQuery bez vanila.js samo preko golog JS. Doduše, morao sam jer niko drugi nije hteo a i nisam imao mnogo vremena.
Kliknite za proširenje...
Vanilla JS = javascript. To je samo još jedan način da se kaže običan JS. To je JS bez biblioteka poput jQuery. Tako da kada kažeš "Bez vanilla.js samo goli JS, onda si napravio malu grešku. To je jedno te isto.
 
Bren:
Baš ti hvala na pojašnjenju. Mislio sam da je vanila neki okvir ili biblioteka. Doduše, ja se bavim mahom NET-om. Uzeo sam onu knjigu o JavaScriptu sa nosorogom(mislim da je od Flanagana), nagruvao jezgro JS bez klijentskog JS i potom prešao na React i jQuery. Trebalo mi je jedno godinu dana ali sam se ponovo vratio na NET i usput otkrio Node.js.
Kliknite za proširenje...
Svaka čast. Ne prestaj sa usavršavanjem. Ja sam se prešaltovao sa js-a na JAVA (Android). Kasnije planiram game development, ali za sada se držim standardnih aplikacija. Neki dalji cilj mi je IDLE igra.
 
Bren:
Sila boga ne moli. Neko je morao da preuzme, bio ogroman projekat pa između ostalog i to. Srećom sam se vratio na.NetCore i slične tehnologije. To mi je dovoljno do kraja života koliko ga ima.
Kliknite za proširenje...
Jedna od bitnijih stvari je da radiš neke projekte sa strane i da ih staviš na GitHub. Odlično za tvoj portfolio mimo radnog iskustva. Pokazatelj koliko si strastven oko toga što je poslodavcu jasno čim vidi da ti mimo posla još radiš.
 
Baby Yoda:
Jedna od bitnijih stvari je da radiš neke projekte sa strane i da ih staviš na GitHub. Odlično za tvoj portfolio mimo radnog iskustva. Pokazatelj koliko si strastven oko toga što je poslodavcu jasno čim vidi da ti mimo posla još radiš.
Kliknite za proširenje...
Ne znam kolko je github tu nesto uticajan glede proseka, ali svakako da mozes da se referenciras na te programe, pa mozda negde upali...
 
Prijavite se ili registrujte da biste poslali poruku.

Slične teme

Vuk Samotnjak
"Jednostavan" sat od 4.500 evra: Predstavljen Oris Hölstein 2025
Odgovora
6
Pregleda
254
acabg
acabg
Umri_muski
Eksplozija AI prevara preko neta
Odgovora
5
Pregleda
306
mario80
mario80

Back
Top