Membuat Pesan Invalid pada Form Login tanpa reload
Membuat Pesan Valid / Invalid pada Form Login
Segmen ini menentukan, bagaimana kita dapat membuat pesan/notifikasi pada formulir untuk entri yang tidak valid tanpa reload / menyegarkan halaman.effect ()
Baca Juga
Kami telah menetapkan " wongoding@gmail.com " dan " admin" masing-masing sebagai ID pengguna dan kata sandi untuk formulir login kami. Saat pengguna mencoba memasukkan ID pengguna atau kata sandi yang berbeda, formulir akan bergetar dan pesan peringatan akan ditampilkan dalam formulir.
Efek getar di jQuery hanya dapat digunakan dengan menyertakan library js.
Seperti yang ditunjukkan pada kode di bawah ini.
File HTML: login.html
<!DOCTYPE html>
<html>
<head>
<title>Login Form Validasi</title>
<meta content="noindex, nofollow" name="robots">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet">
<!-- Including below JS library is mandatory to use shake effect -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="maindiv">
<!--=========================================================================================
Shake Effect Login Form HTML mulai disini
===========================================================================================-->
<div id="first">
<div id="title">
<h2>Shake Form on Invalid Login</h2>
</div>
<form id="login" name="login">
<h3>Login Form</h3>
<input class="textbox" id="email" name="email" placeholder="Email" type="email">
<input class="textbox" id="password" name="password" placeholder="Password" type="password">
<input id="login_button" type="button" value=" Login ">
<div id="message"></div>
</form>
<div id="last">
Example:<br>
Email : <span>wongoding@gmail.com</span><br>
Password : <span>admin</span>
</div>
</div>
</div>
</body>
</html>
File jQuery: script.js
$(document).ready(function() {
// Start ketika dokument ready.
$("#login_button").click(function() {
var email = $("#email").val(); // Store E-mail input value in the variable email.
var password = $("#password").val(); // Store Password input value in the variable password.
/ * Periksa apakah email=wongoding@gmail.com dan kata sandi = admin, Lalu tampilkan pesan Akun Divalidasi !!! di Div yang memiliki pesan id. * /
if (email == "wongoding@gmail.com" && password == "admin") {
$("#message").html("Account Validated!!!");
}
/ * Jika E-mail dan Kata Sandi tidak cocok maka guncangkan Div yang memiliki id maindiv dan perlihatkan pesan "*** Email atau kata sandi tidak valid ***" di div yang memiliki pesan id. * /
else {
$("#login").effect("shake");
$("#message").html('***Invalid email or password***');
}
});
});
File CSS: style.css
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
/*-------------------------------------------------------
CSS for required elements.
---------------------------------------------------------*/
div#maindiv {
margin:30px auto;
width: 980px;
height: 500px;
background: #Ffffff;
padding-top:20px;
font-family: 'Droid Serif', serif;
font-size:14px;
}
.textbox {
border: 1px solid #c4c4c4;
height: 30px;
width: 250px;
padding:4px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:0px 0px 8px #d9d9d9;
-moz-box-shadow:0px 0px 8px #d9d9d9;
-webkit-box-shadow:0px 0px 8px #d9d9d9;
}
.textbox:focus {
border: 1px solid #7bc1f7;
}
div#message{
color:red;
width:100%;
margin-top:20px;
}
input#login_button {
background-color:#33bdef;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border:1px solid #057fd0;
color:#ffffff;
padding:4px;
margin-top:10px;
}
span {
color:green;
}
#login {
clear:both;
width:400px;
float:left;
border-radius:5px;
box-shadow:0px 0px 8px #123456;
height:280px;
}
#first {
width:60%;
float:left;
text-align:center;
margin-left:100px;
}
#title {
width:400px;
height:70px;
text-shadow:2px 2px 2px #cfcfcf;
margin-top:30px;
font-size:16px;
}
#last {
clear:both;
padding-top:30px;
width:400px;
}
Kesimpulan:
Oleh karena itu, untuk memberikan efek goyang dan pesan invalid pada Form login, kita harus memasukkan library (js) seperti yang ditunjukkan dalam kode html dan perlu menggunakan metode .effect ('shake') dari jQuery dalam kode kita. Itu akan menambahkan efek peringatan dalam bentuk ketika seseorang mencoba memasukkan data login yang tidak valid.
Terus baca posting blog kami yang lain untuk mendapatkan lebih banyak trik pengkodean dan pengetahuan.
0 Response to "Membuat Pesan Invalid pada Form Login tanpa reload"
Posting Komentar