-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
386 additions
and
137 deletions.
There are no files selected for viewing
250 changes: 250 additions & 0 deletions
250
sqlphp/developer-notes/js/javascript (VanillaJs)/javascript - Events.&.Form.Validation.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,250 @@ | ||
>>>> JavaScript Events & Form Validation >>>>> | ||
|
||
|
||
----------------------------------------------------- | ||
Keys: Event And Form Submit, | ||
addEventListener(), | ||
|
||
---------------------------------------------------- | ||
|
||
--------------------------------------------------------------------------- | ||
|
||
--------------------------------------------------------------------------- | ||
|
||
//1. Event And Form Submit: | ||
|
||
|
||
|
||
<?php | ||
|
||
include 'connection.php'; | ||
|
||
|
||
?> | ||
|
||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<title>Bootstrap Example</title> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | ||
</head> | ||
<body> | ||
|
||
<div class="container"> | ||
<div class="row"> | ||
<div class="col-lg-4 offset-lg-4 py-5"> | ||
<h1>User Login</h1> | ||
<form name="myForm" action="dashboard.php" onsubmit="return formSubmit()" method="post"> | ||
<div class="py-2"> | ||
<label for="username">Username:</label><br> | ||
<input type="text" id="username" name="username" oninput="usernameValidate(this)" class="form-control" > | ||
<span class="errorUser">Username is empty</span> | ||
</div> | ||
|
||
<div class="py-2"> | ||
<label for="password">Password:</label><br> | ||
<input type="password" id="password" name="password" oninput="passwordValidate(this)" class="form-control"> | ||
<span class="errorPass">Password is empty</span> | ||
</div> | ||
<div class="py-2"> | ||
<input id="btn" type="submit" name="login" value="Login" class="btn btn-success form-control"> | ||
</form> | ||
|
||
<div class="py-2"> | ||
<button id="btn2" name="login" value="Login" onclick="checkForm()" class="btn btn-success form-control">Submit</button> | ||
|
||
</div> | ||
</div> | ||
</div> | ||
|
||
</div> | ||
|
||
</body> | ||
</html> | ||
|
||
|
||
|
||
<script> | ||
|
||
const errorUser = document.querySelector(".errorUser") | ||
const errorPass = document.querySelector(".errorPass") | ||
|
||
const username = document.querySelector('#username') | ||
const password = document.querySelector('#password') | ||
|
||
//Submit Form | ||
function formSubmit(){ | ||
if(username.value == ""){ | ||
username.style.border = "1px solid red" | ||
errorUser.style.display = "block" | ||
return false | ||
} | ||
if(password.value == ""){ | ||
password.style.border = "1px solid red" | ||
errorPass.style.display = "block" | ||
return false | ||
} | ||
|
||
return true | ||
} | ||
|
||
//User Validate | ||
function usernameValidate(ele){ | ||
|
||
if(ele.value == ""){ | ||
ele.style.border = "1px solid red" | ||
errorUser.style.display = "block" | ||
return false | ||
}else{ | ||
ele.style.border = "1px solid blue" | ||
errorUser.style.display = "none" | ||
return false | ||
} | ||
|
||
return true | ||
} | ||
|
||
//Password Validate | ||
function passwordValidate(ele){ | ||
|
||
if(ele.value == ""){ | ||
ele.style.border = "1px solid red" | ||
errorPass.style.display = "block" | ||
return false | ||
}else{ | ||
ele.style.border = "1px solid blue" | ||
errorPass.style.display = "none" | ||
return false | ||
} | ||
|
||
return true | ||
} | ||
|
||
|
||
</script> | ||
|
||
|
||
<style> | ||
.errorUser {display:none; color:red;} | ||
.errorPass {display:none;color:red;} | ||
</style> | ||
|
||
|
||
----x---- | ||
---------------------------------------------------------------------------------- | ||
|
||
|
||
//2. Form Validation && Event, addEventListener() | ||
|
||
|
||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<title>Bootstrap Example</title> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | ||
</head> | ||
<body> | ||
|
||
<div class="container"> | ||
<div class="row"> | ||
<div class="col-lg-4 offset-lg-4 py-5"> | ||
<h1>User Login</h1> | ||
<form name="myForm" action="dashboard.php" onsubmit="return validateForm()" method="post"> | ||
<div class="py-2"> | ||
<label for="username">Username:</label><br> | ||
<input type="text" id="username" name="username" class="form-control" > | ||
<span class="errorUser" id="errorUser">Username is empty</span> | ||
</div> | ||
|
||
<div class="py-2"> | ||
<label for="password">Password:</label><br> | ||
<input type="password" id="password" name="password" class="form-control"> | ||
<span class="errorPass" id="errorPass">Password is empty</span> | ||
</div> | ||
<div class="py-2"> | ||
|
||
<input id="btn" type="submit" name="login" value="Login" class="btn btn-success form-control"> | ||
</form> | ||
|
||
</div> | ||
</div> | ||
</div> | ||
|
||
</div> | ||
|
||
</body> | ||
</html> | ||
|
||
|
||
<script type="text/javascript"> | ||
|
||
function validateForm(){ | ||
|
||
const username = document.forms["myForm"]["username"] | ||
const password = document.forms["myForm"]["password"] | ||
|
||
|
||
if(username.value.trim().length < 1){ | ||
|
||
document.querySelector('.errorUser').style.display = "block" | ||
document.querySelector('#username').style.border = "1px solid red" | ||
} | ||
|
||
if(password.value.trim().length < 1){ | ||
|
||
document.querySelector('.errorPass').style.display = "block" | ||
document.querySelector('#password').style.border = "1px solid red" | ||
} | ||
|
||
return false | ||
|
||
} | ||
|
||
|
||
const username = document.querySelector('#username'); | ||
username.addEventListener('keyup', function(){ | ||
|
||
if(username.value.trim().length > 0){ | ||
document.querySelector('#username').style.border = "1px solid blue" | ||
document.querySelector('.errorUser').style.display = "none" | ||
} | ||
else{ | ||
document.querySelector('#username').style.border = "1px solid red" | ||
document.querySelector('.errorUser').style.display = "block" | ||
return false | ||
} | ||
}); | ||
|
||
const password = document.querySelector('#password'); | ||
password.addEventListener('keyup', function(){ | ||
|
||
if(password.value.trim().length > 0){ | ||
document.querySelector('#password').style.border = "1px solid blue" | ||
document.querySelector('.errorPass').style.display = "none" | ||
} | ||
else{ | ||
document.querySelector('#password').style.border = "1px solid red" | ||
document.querySelector('.errorPass').style.display = "block" | ||
return false | ||
} | ||
}); | ||
|
||
|
||
</script> | ||
|
||
|
||
<style> | ||
.errorUser {display:none; color:red;} | ||
.errorPass {display:none;color:red;} | ||
|
||
#errorUser {display:none; color:red;} | ||
#errorPass {display:none;color:red;} | ||
|
||
</style> | ||
-----x----- |
137 changes: 0 additions & 137 deletions
137
sqlphp/developer-notes/js/javascript (VanillaJs)/javascript - Events.txt
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.