basic form
Showing
app.js
0 → 100644
| var main=function(){ | |||
| $('#register').click(function(){ | |||
| console.log('click'); | |||
| $('.error').hide(); | |||
| var firstName=$('#firstName').val(); | |||
| var lastName=$('#lastName').val(); | |||
| var email=$('#email').val(); | |||
| var emailConfirm=$('#emailConfirm').val(); | |||
| var birthday=$('#birthday').val(); | |||
| var reg=true; | |||
| if(!(firstName)||!((/^[a-z\s]+$/i).test(firstName))){ | |||
| $('.error').show(); | |||
| $('#firstName').val('Error!'); | |||
| reg=false; | |||
| }; | |||
| if(!(lastName)||!((/^[a-z\s]+$/i).test(lastName))){ | |||
| $('.error').show(); | |||
| $('#lastName').val('Error!'); | |||
| reg=false; | |||
| }; | |||
| if(!((/^[a-z][a-z0-9._]+@[a-z0-9]+\.[a-z0-9.]+[a-z]+$/i).test(email))){ | |||
| $('.error').show(); | |||
| $('#email').val('Error!'); | |||
| reg=false; | |||
| }; | |||
| if(!((/^[a-z][a-z0-9._]+@[a-z0-9]+\.[a-z0-9.]+[a-z]+$/i).test(emailConfirm))||email!=emailConfirm){ | |||
| $('.error').show(); | |||
| $('#emailConfirm').val('Error!'); | |||
| reg=false; | |||
| }; | |||
| if(!checkDate(birthday)){ | |||
| $('.error').show(); | |||
| $('#birthday').val('Error!'); | |||
| reg=false; | |||
| } | |||
| if (reg===true) { | |||
| confirm("Thank you for registing"); | |||
| } | |||
| }); | |||
| } | |||
| $(document).ready(main); | |||
|
|||
| var checkDate=function(date){ | |||
| var regDate=/^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d+)$/; | |||
| var matchArray=date.match(regDate); | |||
| if (matchArray){ | |||
| if((matchArray[1]<1)||(matchArray[1]>31)){ | |||
| return false; | |||
| }; | |||
| if ((matchArray[3]<1)||(matchArray[3]>12)){ | |||
| return false; | |||
| }; | |||
| if (matchArray[5].length!=4){ | |||
| return false; | |||
| }; | |||
| return true; | |||
| }; | |||
| return false; | |||
| } |
form.html
0 → 100644
| <!Doctype html> | |||
| <html> | |||
| <head> | |||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |||
| <script type="text/javascript" src="app.js"></script> | |||
| <link type="text/css" rel="stylesheet" href="stylesheet.css"> | |||
| <title>Register Form</title> | |||
| </head> | |||
| <body> | |||
| <div class="formDiv"> | |||
| <h1 style="text-align: center;" class="header1">Register Form</h1> | |||
|
|||
| <table> | |||
| <tr style="height:20px"> | |||
| <td></td> | |||
| <td> | |||
| <p class="error">Input error</p> | |||
| </td> | |||
| </tr> | |||
| <tr> | |||
| <td class="labelTd"><label for="firstName" class="registLabel" >First Name</label></td> | |||
| <td><input class="registInput" id="firstName" placeholder="First Name" /></td> | |||
|
|||
| </tr> | |||
| <tr> | |||
| <td class="labelTd"><label for="lastName" class="registLabel" >Last Name</label></td> | |||
| <td><input class="registInput" id="lastName" placeholder="Last Name" /></td> | |||
| </tr> | |||
| <td class="labelTd"><label for="email" class="registLabel" >Email</label></td> | |||
| <td><input class="registInput" id="email" placeholder="Email" /></td> | |||
| <tr> | |||
| <td class="labelTd"><label for="emailConfirm" class="registLabel" >Email Confirmation</label></td> | |||
| <td><input class="registInput" id="emailConfirm" placeholder="Email Confirmation" /></td> | |||
| </tr> | |||
| <tr> | |||
| <td class="labelTd"><label for="birthday" class="registLabel" >Birthday</label></td> | |||
| <td><input class="registInput" id="birthday" placeholder="Birthday" /></td> | |||
| </tr> | |||
| <tr> | |||
| <td></td> | |||
| <td><button type="button" id="register">Register</button></td> | |||
|
|||
| </tr> | |||
| </table> | |||
| </div> | |||
| </body> | |||
| </html> |
stylesheet.css
0 → 100644