Skip to content

Валидација форме

Задатак 1.

Креирајте HTML страницу са формом за пријаву која садржи следеће елементе:

  • Име
  • Email адресу
  • Годиште

Кликом на дугме Пријави се потребно је проверити да ли је поље Име попуњено, да ли је Email адреса у исправном формату и да ли је годиште позитиван цео број.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Validacija forme</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form id="Prijava">
    <label for="name">Ime:</label>
    <input type="text" id="ime" name="ime">
    <br>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email">
    <br>
    <label for="age">Godiste:</label>
    <input type="text" id="godiste" name="godiste">
    <br>
    <button type="button" onclick="validateForm()">Prijavi se!</button>
  </form>
  <div id="ispisGreske"></div>
  <script src="script.js"></script>
</body>
</html>

style.css

#ispisGreske {
    color: red;
}

script.js

function validateForm() {
  let ime = document.getElementById('ime').value;
  let email = document.getElementById('email').value;
  let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  let godiste = document.getElementById('godiste').value;
  let greska = "";
  let ispisGreske = document.getElementById('ispisGreske');
    
  if (ime.trim() === "") {
    greska += "Ime je obavezno.<br>";
  }

  if (!email.match(emailRegex)) {
    greska += "Email adresa nije validna.<br>";
  }

  if (isNaN(godiste) || godiste <= 0) {
    greska += "Godiste mora biti pozitivan broj.<br>";
  }

  if (greska !== "") {
    ispisGreske.innerHTML = greska;
  } else {
    ispisGreske.innerHTML = "";
    alert("Svi podaci su ispravno popunjeni!");
  }
}

Задатак 2.

Креирајте HTML страницу са формом која садржи два поља:

  • Лозинка
  • Потврди лозинку

Кликом на дугме Пријави се треба проверити следеће:

  • Да ли је мимимална дужниа лозинке осам карактера?
  • Да ли лозинка садржи макар једно велико слово, мало слово, број и специјални карактер?
  • Да ли се је иста лозинка унета у пољу Потврди лозинку?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Password Validation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form id="Validacija lozinki">
    <label for="password">Unesi lozinku:</label>
    <input type="password" id="password" name="password">
    <br>
    <label for="confirmPassword">Potvrdi lozinku:</label>
    <input type="password" id="confirmPassword" name="confirmPassword">
    <br>
    <button type="button" onclick="validatePassword()">Prijava</button>
  </form>
  <div id="passwordError"></div>
  <script src="script.js"></script>
</body>
</html>

style.css

#passwordError {
    color: red;
  }

script.js

function validatePassword() {
    let password = document.getElementById('password').value;
    let confirmPassword = document.getElementById('confirmPassword').value;
    let passwordError = document.getElementById('passwordError');
    let uppercaseRegex = /[A-Z]/;
    let lowercaseRegex = /[a-z]/;
    let numberRegex = /[0-9]/;
    let specialCharRegex = /[!@#$%^&*(),.?":{}|<>]/;
    let errorMessage = "";
    let isValid = true;

    if (password.length < 8) {
        isValid = false;
        errorMessage += "Lozinka mora da sadrzi 8 karaktera.<br>";
    }

    if (!uppercaseRegex.test(password)) {
        isValid = false;
        errorMessage += "Lozinka mora da sadrzi makar jedno veliko slovo.<br>";
    }

    if (!lowercaseRegex.test(password)) {
        isValid = false;
        errorMessage += "Lozinka mora da sadrzi makar jedno malo slovo.<br>";
    }

    if (!numberRegex.test(password)) {
        isValid = false;
        errorMessage += "Lozinka mora da sadrzi makar jednu cifru.<br>";
    }

    if (!specialCharRegex.test(password)) {
        isValid = false;
        errorMessage += "Lozinka mora da sadrzi makar jedan specijalni karakter.<br>";
    }

    if (password !== confirmPassword) {
        isValid = false;
        errorMessage += "Lozinke se ne podudaraju.<br>";
    }

    if (!isValid) {
        passwordError.innerHTML = errorMessage;
    } else {
        passwordError.innerHTML = ""; 
        alert("Password is valid!");
    }
}