Skip to content

Commit 8fdc1f8

Browse files
patjanawatpatjanawat
committed
new index and loading gif
1 parent 4537f47 commit 8fdc1f8

File tree

4 files changed

+148
-43
lines changed

4 files changed

+148
-43
lines changed

‎README.md‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
11
# jquery-validation
2-
use jquery validate: https://jqueryvalidation.org/files/demo/
2+
Ajax validation:
3+
https://jqueryvalidation.org/files/demo/
4+
5+
Ajax CDN:
6+
https://docs.microsoft.com/en-us/aspnet/ajax/cdn/jquery-validate/
7+
https://cdnjs.com/
8+
9+
Fax online REST API:
10+
https://jsonplaceholder.typicode.com/
11+
https://reqres.in/

‎asset/images/loading.gif‎

418 Bytes
Loading

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
6+
<title>Document</title>
7+
</head>
8+
<body>
9+
<p>
10+
Welcome to my index.
11+
</p>
12+
</body>
13+
</html>

‎login.html‎

Lines changed: 125 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,157 @@
11
<html lang="en">
2+
23
<head>
34
<meta charset="UTF-8">
45
<meta name="viewport" content="width=device-width, initial-scale=1.0">
56
<meta http-equiv="X-UA-Compatible" content="ie=edge">
67
<title>Document</title>
7-
8+
9+
10+
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
11+
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
12+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js"></script> -->
13+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> -->
14+
15+
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
16+
817
</head>
18+
919
<body>
10-
<form id="form" class="cmxform" action="" method="get" enctype="multipart/form-data" novalidate="novalidate">
20+
<form id="form" novalidate="novalidate">
21+
<p class="">
22+
<h1>
23+
:: Login System ::
24+
</h1>
25+
</p>
1126
<div class="name">
12-
<label for="name">Name:</label>
13-
<input type="text" name="name" id="txtName" required aria-required="true">
27+
<label for="name">Email:</label>
28+
<input type="text" name="email" id="txt_email" required aria-required="true">
1429
</div>
1530
<div class="lastname">
16-
<label for="lastname">Lastname:</label>
17-
<input type="text" name="lastname" id="txtId" required>
18-
</div>
19-
<div class="action">
20-
<input type="submit" value="Register" id="btnRegister">
21-
<input type="reset" id="btnReset" value="btnReset">
31+
<label for="password">Password:</label>
32+
<input type="password" name="password" id="txt_password" required aria-required="true">
2233
</div>
34+
<p class="action">
35+
<input type="submit" value="Login" id="btnRegister">
36+
<input type="reset" value="Cancel" id="btnReset">
37+
</p>
2338
</form>
2439

2540
<link rel="stylesheet" href="/asset/css/cmxform.css">
2641
<style>
27-
#form div{
28-
padding: 5px 10px 7px;
29-
}
30-
#form label {
31-
width: 77px;
32-
display: inline-block;
33-
}
42+
#form div {
43+
padding: 5px 10px 7px;
44+
}
3445

35-
#form .action{
36-
margin-left: 80px;
37-
}
46+
#form label {
47+
width: 77px;
48+
display: inline-block;
49+
}
50+
51+
#form .action {
52+
margin-left: 90px;
53+
}
54+
55+
#form label.error {
56+
margin-left: 10px;
57+
width: 250px;
58+
}
59+
</style>
3860

39-
#form label.error{
40-
margin-left:77px;
41-
width:250px;
42-
}
43-
</style>
44-
45-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
46-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
4761

4862
<script>
4963

5064
//กำหนดตัวแปรสำหรับเก็บค่า validate
5165
var frmValidate;
66+
67+
/************************** loading ***********************/
68+
// var loader = jQuery('<div id="loader"><img src="/asset/images/loading.gif" alt="loading..."></div>')
69+
// .css({
70+
// position: "relative",
71+
// top: "1em",
72+
// left: "25em",
73+
// display: "inline"
74+
// })
75+
// .appendTo("body")
76+
// .hide();
5277

53-
//ถ้า validate ผ่านจะทำงานที่ฟังก์ชันนี้
54-
$.validator.setDefaults({
55-
submitHandler:function(){
56-
console.log('submitted');
57-
}
58-
});
78+
// $().ajaxStart(function () {
79+
// loader.show();
80+
// }).ajaxStop(function () {
81+
// loader.hide();
82+
// }).ajaxError(function (a, b, e) {
83+
// throw e;
84+
// });
85+
/*************************************************************/
86+
87+
// $('#idของform').validate({
88+
// //กฏการตรวจสอบ
89+
// rules:{
90+
// //rule1 : condition,
91+
// //rule2 : condition
92+
// },
93+
// //แสดงข้อความ เมื่อตรวจสอบ ไม่ผ่าน
94+
// messages: {
95+
// //rule1: message,
96+
// //rule2: message
97+
// },
98+
// //ตรวจสอบผ่านทุก rules แล้วจะทำคำสั่งในนี้
99+
// submitHandler: function (form) {
100+
// //ใส่คำสั่งที่ต้องการให้ทำงานไว้ในนี้
101+
// }
102+
// });
103+
104+
//สั่งให้ validate
105+
frmValidate = $('#form').validate({
106+
rules: {
107+
password:"required",
108+
email: {
109+
"required": true,
110+
"email": true
111+
}
112+
},
113+
messages: {
114+
email: "Please enter your email!",
115+
password: "Please enter your password!"
116+
},
117+
submitHandler: function (form) {
118+
//ถ้า validate ผ่านจะเข้ามาทำคำนั่งในนี้
59119

60-
$(document).ready(function(){
61-
62-
//สั่งให้ validate
63-
frmValidate = $('#form').validate();
120+
//เก็บ email และ password เก้บไว้ในตัวแปร
121+
var _email = $(form).find('#txt_email').val();
122+
var _password = $(form).find('#txt_password').val();
64123

65-
//ล้างการ validate ทิ้ง
66-
$('#btnReset').click(function(){
67-
frmValidate.destroy();
68-
})
124+
//ล็อกอินเข้าระบบ โดยใช้ ajax
125+
$.ajax({
126+
url: 'https://reqres.in/api/login',//ล็อกอินสำเร็จ
127+
type: "POST",
128+
data: {
129+
"email": _email,
130+
"password": _password //Comment ถ้าต้องการทดสอบกรณี ล็อกอินไม่สำเร็จ
131+
},
132+
success: function (response) {
133+
alert('Login success.');
134+
// console.log('Login success');
135+
// console.log(response);
136+
137+
location="/index.html";
138+
},
139+
error:function(error){
140+
console.log(error.responseText);
141+
console.log('Login failure.');
142+
}
143+
});
144+
145+
return false;
146+
}
69147
});
70148

149+
//ล้างการ validate ทิ้ง
150+
$('#btnReset').click(function () {
151+
frmValidate.resetForm();
152+
});
71153

72154
</script>
73155
</body>
156+
74157
</html>

0 commit comments

Comments
 (0)