Quantcast

Jednostavan primer validacije forme preko javascripta

Baby Yoda

Contributor
Poruka
8.734
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
 

Baby Yoda

Contributor
Poruka
8.734
Ne nego slazem se. Moglo je drugacije jos jednostavnije ali ovako je lakse i brze. 🙂
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:
 

Baby Yoda

Contributor
Poruka
8.734
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. 🤘
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.
 

Baad_Boy

Poznat
Poruka
8.016
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.
Nista ja ne kapiram. Znam da su sve neke komande ili funkcije valjda mozda ali nznm nista 😄
 

Baby Yoda

Contributor
Poruka
8.734
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.
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.
 

Baby Yoda

Contributor
Poruka
8.734
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.
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.
 

Baby Yoda

Contributor
Poruka
8.734
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.
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.
 

Baby Yoda

Contributor
Poruka
8.734
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.
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š.
 

bmaxa

Poznat
Moderator
Poruka
7.766
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š.
Ne znam kolko je github tu nesto uticajan glede proseka, ali svakako da mozes da se referenciras na te programe, pa mozda negde upali...
 

Top
  Blokirali ste reklame
Dragi prijatelju, nemojte da blokirate reklame - isključite Ad Blocker na Forumu, jer će tako mesto vaših susreta na Krstarici ostati besplatno za korišćenje.