[Review]basic form
Create basic form with validation
{{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved
-
form.html 0 → 1006441 <!Doctype html> 2 <html> 3 <head> 4 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 5 <script type="text/javascript" src="app.js"></script> 6 7 <link type="text/css" rel="stylesheet" href="stylesheet.css"> 8 <title>Register Form</title> 9 </head> 10 <body> 11 <div class="formDiv"> 12 <h1 style="text-align: center;" class="header1">Register Form</h1> -
Developer
hạn chế dùng thẻ style trong các element
-
-
stylesheet.css 0 → 100644
1 .formDiv{ 2 margin: 0 auto; 3 width:1171px; 4 height:435px; 5 border:1px solid 6 } 7 .header1{ 8 font-family: Arial; -
Developer
font-family, font-size dùng chung cho page nên để chung css. Ví dụ: html, body {font-family: Arial; font-size:14px;}
-
-
stylesheet.css 0 → 100644
33 margin-bottom: 8px; 34 border-radius: 5px; 35 border:1px solid gray; 36 font-size:14px; 37 font-family: Arial; 38 } 39 ::-webkit-input-placeholder{ 40 font-size:14px; 41 font-family: Arial; 42 } 43 .labelTd{ 44 width:183px; 45 background-color:white; 46 font-weight:bold; 47 } 48 #register{ -
Developer
type css hạn chế dùng ID. Trong trường hợp này có thể dùng: table button
-
-
form.html 0 → 100644
25 <td class="labelTd"><label for="lastName" class="registLabel" >Last Name</label></td> 26 <td><input class="registInput" id="lastName" placeholder="Last Name" /></td> 27 </tr> 28 <td class="labelTd"><label for="email" class="registLabel" >Email</label></td> 29 <td><input class="registInput" id="email" placeholder="Email" /></td> 30 <tr> 31 <td class="labelTd"><label for="emailConfirm" class="registLabel" >Email Confirmation</label></td> 32 <td><input class="registInput" id="emailConfirm" placeholder="Email Confirmation" /></td> 33 </tr> 34 <tr> 35 <td class="labelTd"><label for="birthday" class="registLabel" >Birthday</label></td> 36 <td><input class="registInput" id="birthday" placeholder="Birthday" /></td> 37 </tr> 38 <tr> 39 <td></td> 40 <td><button type="button" id="register">Register</button></td> -
DeveloperEdited by Nguyen Ngoc Minh Thao
hover vô button:
- có biểu tượng bàn tay
- thêm hiệu ứng hover cho button
-
-
form.html 0 → 100644
7 <link type="text/css" rel="stylesheet" href="stylesheet.css"> 8 <title>Register Form</title> 9 </head> 10 <body> 11 <div class="formDiv"> 12 <h1 style="text-align: center;" class="header1">Register Form</h1> 13 <table> 14 <tr style="height:20px"> 15 <td></td> 16 <td> 17 <p class="error">Input error</p> 18 </td> 19 </tr> 20 <tr> 21 <td class="labelTd"><label for="firstName" class="registLabel" >First Name</label></td> 22 <td><input class="registInput" id="firstName" placeholder="First Name" /></td> -
Developer
Khi ở trạng thái error, làm nổi bật cái input error
-
-
app.js 0 → 100644
26 if(!((/^[a-z][a-z0-9._]+@[a-z0-9]+\.[a-z0-9.]+[a-z]+$/i).test(emailConfirm))||email!=emailConfirm){ 27 $('.error').show(); 28 $('#emailConfirm').val('Error!'); 29 reg=false; 30 }; 31 if(!checkDate(birthday)){ 32 $('.error').show(); 33 $('#birthday').val('Error!'); 34 reg=false; 35 } 36 if (reg===true) { 37 confirm("Thank you for registing"); 38 } 39 }); 40 } 41 $(document).ready(main); -
DeveloperEdited by Nguyen Ngoc Minh Thao
Nên phân biệt giữa nhập sai giá trị và để trống. Khi input có chữ Error! click chuột vào phải mất chữ Error! Hoặc có thể thêm cụ thể vị trí error lên class error. Ví dụ:
- First name error
- Last name error
-
-
app.js 0 → 100644
1 var main=function(){ 2 $('#register').click(function(){ 3 console.log('click'); 4 $('.error').hide(); 5 var firstName=$('#firstName').val(); 6 var lastName=$('#lastName').val(); 7 var email=$('#email').val(); 8 var emailConfirm=$('#emailConfirm').val(); 9 var birthday=$('#birthday').val(); 10 var reg=true; 11 if(!(firstName)||!((/^[a-z\s]+$/i).test(firstName))){ -
app.js 0 → 100644
21 if(!((/^[a-z][a-z0-9._]+@[a-z0-9]+\.[a-z0-9.]+[a-z]+$/i).test(email))){ 22 $('.error').show(); 23 $('#email').val('Error!'); 24 reg=false; 25 }; 26 if(!((/^[a-z][a-z0-9._]+@[a-z0-9]+\.[a-z0-9.]+[a-z]+$/i).test(emailConfirm))||email!=emailConfirm){ 27 $('.error').show(); 28 $('#emailConfirm').val('Error!'); 29 reg=false; 30 }; 31 if(!checkDate(birthday)){ 32 $('.error').show(); 33 $('#birthday').val('Error!'); 34 reg=false; 35 } 36 if (reg===true) {
