PHPHC-SUIYOBI
Eternal Poster
Good day po mga paps! Ask ko lang po sana kung paano lagyan ito ng alert message po? Like sweet alert or aleritfy po. hindi ko po kasi mawari kung san ko ilalagay yung code. kumbaga kapag wala pong nilagay sa username or password eh may lalabas po na sweet alert or alertify po? Pa help naman po mga paps salamat po!
Narito po yung code ko po.
Narito po yung code ko po.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>MachineProblem#3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style type="text/css">
body {
font-family: "Lato", sans-serif;
}
.main-head{
height: 150px;
background: #FFF;
}
.sidenav {
height: 100%;
background-color: #000;
padding-top: 30px;
}
.main {
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
}
@media screen and (max-width: 450px) {
.login-form{
margin-top: 10%;
}
}
@media screen and (min-width: 768px){
.main{
margin-left: 40%;
}
.sidenav{
width: 40%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
.login-form{
margin-top: 60%;
}
}
.main-login-text{
margin-top: 20%;
padding: 60px;
color: #fff;
}
.main-login-text h2{
font-weight: 300;
}
.btn-black{
background-color: #000;
color: #fff;
}
</style>
<script>
$(document).ready(function() {
$("form[name='loginform']").validate({
rules: {
username: {
required: true,
},
password: {
required: true,
}
},
messages: {
password: {
required: "Please provide a password"
},
username: {
required: "Please enter a valid username"
}
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<div class="sidenav">
<div class="main-login-text">
<h2>Application<br> Login Page</h2>
<p>Login or register from here to access.</p>
</div>
</div>
<div class="main">
<div class="col-md-6 col-sm-12">
<div class="login-form">
<form name="loginform" method="POST" action=" ">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" id="username" class="form-control" placeholder="User Name">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
</div>
<input type="submit" value="Login" class="btn btn-black">
<input type="submit" value="Register" class="btn btn-secondary">
</form>
</div>
</div>
</div>
</script>
</body>
</html>