Hi so I want to make my div shake if username/password is entered incorrectly. The way I have tried clearly doesn't work... I think it might be something to do with the way im using the javascript. Thanks in advance.
HTML/PHP/JAVASCRIPT:
<?php
if(isset($_POST["submit"])) {
$link = mysqli_connect("localhost","root","");
mysqli_select_db($link,"users");
$count = 0;
$res=mysqli_query($link,"SELECT * FROM users WHERE username='$_POST[Username]' && password='$_POST[Password]'");
$count=mysqli_num_rows($res);
if ($count > 0){
header("location: /test.php");
}
else {
?>
<script type="text/javascript">
document.getElementById("box").addClass("invalid");
</script>
<?php
}
}
?>
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<div id ="box">
<img src="user.png">
<form autocomplete="off" method="post" action="index.php">
<input class="inputbox" type="text" name= "Username" pattern=".{2,15}" required title="2 to 15 characters" placeholder="Username "/>
<input class="inputbox" type="password" name ="Password" pattern=".{2,15}" required title="2 to 15 characters" placeholder="Password"/>
<input id = "submitbutton" type="submit" name="submit" value="Login" />
</form>
</div>
</body>
CSS:
body {
background-color:#42cbf4;
}
#box {
position:absolute;
top:45%;
left:50%;
width:300px;
height:375px;
transform:translate(-50%, -50%);
box-shadow:0px 0px 15px rgba(51, 96, 175,0.5);
border-radius:8px;
}
#box img {
position:absolute;
width:150px;
height:150px;
left:50%;
top:7%;
transform:translate(-50%, 0);
}
.inputbox {
margin-bottom:10px;
border:solid #333caf 1px;
border-radius:5px;
background-color:rgba(51, 60, 175, .05);
font-size:20px;
}
::-moz-placeholder {
opacity:0.5;
color: #333caf;
}
:-moz-placeholder {
color: #333caf;
opacity:0.5;
}
::-webkit-input-placeholder {
color: #333caf;
opacity:0.5;
}
#box form {
position:absolute;
left:50%;
transform:translate(-50%, 0);
bottom:5%;
text-align:center;
}
.inputbox:focus {
outline:none;
}
#box form {
z-index:5;
}
#box #submitbutton {
background-color:#333caf;
border:0;
margin-top:5px;
font-family:arial;
font-size:18px;
padding:7px 17px;
border-radius:5px;
color:rgb(202,202,202);
transition:color 0.2s ease-in-out, box-shadow 0.25s ease-out, background-color 0.2s ease-in-out ;
}
#box #submitbutton:hover {
background-color:rgba(51, 60, 175, .5);
color:white;
box-shadow:3px 3px 5px rgba(15,15,15,0.7);
}
#box #submitbutton:focus {
outline:none;
}
#box.invalid {
outline-color: red;
-webkit-animation: shake .5s linear;
}
@-webkit-keyframes shake {
8%, 41% {
-webkit-transform: translateX(-10px);
}
25%, 58% {
-webkit-transform: translateX(10px);
}
75% {
-webkit-transform: translateX(-5px);
}
92% {
-webkit-transform: translateX(5px);
}
0%, 100% {
-webkit-transform: translateX(0);
}
}
Php Code:
<?php
$invalid = false;
if(isset($_POST["submit"])) {
$link = mysqli_connect("localhost","root","");
mysqli_select_db($link,"users");
$count = 0;
$res=mysqli_query($link,"SELECT * FROM users WHERE username='$_POST[Username]' && password='$_POST[Password]'");
$count=mysqli_num_rows($res);
if ($count > 0){
header("location: /test.php");
}
else {
$invalid=true;
}
}
?>
Add below javascript code before your </body> tag: check for $invalid is set, if set add the invalid class to box
<script>
$(document).ready(function() {
var is_invalid = "<?php echo $invalid;?>";
if(is_invalid)
$('#box').addClass('invalid');
});
</script>
Dom doesn't have the 'addClass' method.
'addClass' is a jQuery element method.
do it like this:
var box = document.getElementById("box");
box.className += ' invalid';
or:
$('#box').addClass('invalid');