Baby Yoda
Contributor
- Poruka
- 8.734
Najjednostavniji primer validacije forme preko JS-a.
HTML:
CSS:
javascript:
JS fiddle:
https://jsfiddle.net/CodeIllusionist/nmqjvpd6/3/
Validan username je: new_user
Validna lozinka je: 123456789
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
